import { useIntl } from "react-intl" import { selectRate } from "@/constants/routes/hotelReservation" import { mapFacilityToIcon } from "@/components/ContentType/HotelPage/data" import Button from "@/components/TempDesignSystem/Button" import Link from "@/components/TempDesignSystem/Link" import Body from "@/components/TempDesignSystem/Text/Body" import Caption from "@/components/TempDesignSystem/Text/Caption" import Footnote from "@/components/TempDesignSystem/Text/Footnote" import Subtitle from "@/components/TempDesignSystem/Text/Subtitle" import NoPriceAvailableCard from "../../HotelCard/NoPriceAvailableCard" import HotelCardDialogImage from "../HotelCardDialogImage" import styles from "../hotelCardDialog.module.css" import type { HotelPin } from "@/types/components/hotelReservation/selectHotel/map" import type { Lang } from "@/constants/languages" interface StandaloneHotelCardProps { data: HotelPin lang: Lang imageError: boolean setImageError: (error: boolean) => void } export default function StandaloneHotelCardDialog({ data, lang, imageError, setImageError, }: StandaloneHotelCardProps) { const intl = useIntl() const { name, publicPrice, memberPrice, currency, amenities, images, ratings, operaId, } = data const firstImage = images[0]?.imageSizes?.small const altText = images[0]?.metaData?.altText return ( <>

{name}

{amenities.slice(0, 3).map((facility) => { const IconComponent = mapFacilityToIcon(facility.id) return (

{IconComponent && ( )} {facility.name}

) })}

{publicPrice || memberPrice ? ( <>

{intl.formatMessage({ id: "From" })} {publicPrice && ( {publicPrice} {currency} /{intl.formatMessage({ id: "night" })} )} {memberPrice && ( {memberPrice} {currency} /{intl.formatMessage({ id: "night" })} )}

) : ( )}

) }