feat(SW-252): add icons

components/HotelReservation/HotelCard/index.tsx

@@ -1,13 +1,12 @@
+import { mapFacilityToIcon } from "@/components/ContentType/HotelPage/data"
 import {
   ChevronRightIcon,
   PriceTagIcon,
   ScandicLogoIcon,
 } from "@/components/Icons"
-import { getIconByIconName } from "@/components/Icons/get-icon-by-icon-name"
 import Image from "@/components/Image"
 import Button from "@/components/TempDesignSystem/Button"
 import Chip from "@/components/TempDesignSystem/Chip"
-import Divider from "@/components/TempDesignSystem/Divider"
 import Link from "@/components/TempDesignSystem/Link"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 import Footnote from "@/components/TempDesignSystem/Text/Footnote"
@@ -20,6 +19,11 @@ import { HotelCardProps } from "@/types/components/hotelReservation/selectHotel/
 
 export default async function HotelCard({ hotel }: HotelCardProps) {
   const intl = await getIntl()
+
+  const sortedAmenities = hotel.detailedFacilities
+    .sort((a, b) => b.sortOrder - a.sortOrder)
+    .slice(0, 5)
+
   return (
     <article className={styles.card}>
       <Image
@@ -39,11 +43,15 @@ export default async function HotelCard({ hotel }: HotelCardProps) {
       </header>
       <section className={styles.hotel}>
         <div className={styles.facilities}>
-          {hotel.detailedFacilities.slice(0, 6).map((data) => (
-            <Caption key={data.id} color="textMediumContrast">
-              {data.name}
-            </Caption>
-          ))}
+          {sortedAmenities.map((facility) => {
+            const IconComponent = mapFacilityToIcon(facility.name)
+            return (
+              <div className={styles.facilitiesItem} key={facility.id}>
+                {IconComponent && <IconComponent color="grey80" />}
+                <Caption color="textMediumContrast">{facility.name}</Caption>
+              </div>
+            )
+          })}
         </div>
         <Link href="#" color="burgundy" className={styles.link}>
           {intl.formatMessage({ id: "See hotel details" })}