feat(SW-340): Added Hotel Card Listing on map

components/HotelReservation/HotelCard/index.tsx

@@ -4,23 +4,22 @@ import { useIntl } from "react-intl"
 import { mapFacilityToIcon } from "@/components/ContentType/HotelPage/data"
 import { PriceTagIcon, ScandicLogoIcon } from "@/components/Icons"
 import TripAdvisorIcon from "@/components/Icons/TripAdvisor"
-import Image from "@/components/Image"
 import Button from "@/components/TempDesignSystem/Button"
 import Chip from "@/components/TempDesignSystem/Chip"
 import Link from "@/components/TempDesignSystem/Link"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 import Footnote from "@/components/TempDesignSystem/Text/Footnote"
 import Title from "@/components/TempDesignSystem/Text/Title"
-import { getIntl } from "@/i18n"
 
 import ReadMore from "../ReadMore"
 import ImageGallery from "../SelectRate/ImageGallery"
+import { hotelCardVariants } from "./variants"
 
 import styles from "./hotelCard.module.css"
 
 import type { HotelCardProps } from "@/types/components/hotelReservation/selectHotel/hotelCardProps"
 
-export default function HotelCard({ hotel }: HotelCardProps) {
+export default function HotelCard({ hotel, type = "listing" }: HotelCardProps) {
   const intl = useIntl()
 
   const { hotelData } = hotel
@@ -28,8 +27,12 @@ export default function HotelCard({ hotel }: HotelCardProps) {
 
   const amenities = hotelData.detailedFacilities.slice(0, 5)
 
+  const classNames = hotelCardVariants({
+    type,
+  })
+
   return (
-    <article className={styles.card}>
+    <article className={classNames}>
       <section className={styles.imageContainer}>
         {hotelData.gallery && (
           <ImageGallery