"use client" import { useParams } from "next/dist/client/components/navigation" import { useIntl } from "react-intl" import { Lang } from "@/constants/languages" import { selectHotelMap } from "@/constants/routes/hotelReservation" import { mapFacilityToIcon } from "@/components/ContentType/HotelPage/data" import ImageGallery from "@/components/ImageGallery" import Divider from "@/components/TempDesignSystem/Divider" import Link from "@/components/TempDesignSystem/Link" import Body from "@/components/TempDesignSystem/Text/Body" import Caption from "@/components/TempDesignSystem/Text/Caption" import Subtitle from "@/components/TempDesignSystem/Text/Subtitle" import getSingleDecimal from "@/utils/numberFormatting" import ReadMore from "../ReadMore" import TripAdvisorChip from "../TripAdvisorChip" import HotelLogo from "./HotelLogo" import HotelPriceList from "./HotelPriceList" import { hotelCardVariants } from "./variants" import styles from "./hotelCard.module.css" import { HotelCardListingTypeEnum } from "@/types/components/hotelReservation/selectHotel/hotelCardListingProps" import type { HotelCardProps } from "@/types/components/hotelReservation/selectHotel/hotelCardProps" export default function HotelCard({ hotel, type = HotelCardListingTypeEnum.PageListing, state = "default", onHotelCardHover, }: HotelCardProps) { const params = useParams() const lang = params.lang as Lang const intl = useIntl() const { hotelData } = hotel const { price } = hotel const amenities = hotelData.detailedFacilities.slice(0, 5) const classNames = hotelCardVariants({ type, state, }) const handleMouseEnter = () => { if (onHotelCardHover) { onHotelCardHover(hotelData.name) } } const handleMouseLeave = () => { if (onHotelCardHover) { onHotelCardHover(null) } } return (

{hotelData.ratings?.tripAdvisor && ( )}

{hotelData.name}

{hotelData.address.streetAddress}, {hotelData.address.city}

{intl.formatMessage( { id: "Distance in km to city centre" }, { number: getSingleDecimal( hotelData.location.distanceToCentre / 1000 ), } )}

{hotelData.hotelContent.texts.descriptions.short}

{amenities.map((facility) => { const IconComponent = mapFacilityToIcon(facility.id) return (

{IconComponent && } {facility.name}

) })}

) }