import { useIntl } from "react-intl" import { BED_TYPE_ICONS, type BedTypes } from "@/constants/booking" import ImageGallery from "@/components/ImageGallery" import Body from "@/components/TempDesignSystem/Text/Body" import Caption from "@/components/TempDesignSystem/Text/Caption" import Subtitle from "@/components/TempDesignSystem/Text/Subtitle" import { mapApiImagesToGalleryImages } from "@/utils/imageGallery" import { FacilityIcon } from "../facilityIcon" import styles from "./roomSidePeekContent.module.css" import type { Room } from "@/types/hotel" interface RoomSidePeekContentProps { room: Room } export function RoomSidePeekContent({ room }: RoomSidePeekContentProps) { const intl = useIntl() const roomSize = room.roomSize const totalOccupancy = room.totalOccupancy const roomDescription = room.descriptions.medium const galleryImages = mapApiImagesToGalleryImages(room.images) return (
{totalOccupancy && ( {intl.formatMessage( { defaultMessage: "Max. {max, plural, one {{range} guest} other {{range} guests}}", }, { max: totalOccupancy.max, range: totalOccupancy.range, } )} )} {roomSize && ( {roomSize.min === roomSize.max ? intl.formatMessage( { defaultMessage: "{roomSize} m²", }, { roomSize: roomSize.min, } ) : intl.formatMessage( { defaultMessage: "{roomSizeMin}–{roomSizeMax} m²", }, { roomSizeMin: roomSize.min, roomSizeMax: roomSize.max, } )} )}
{roomDescription}
{intl.formatMessage({ defaultMessage: "Room amenities", })}
{intl.formatMessage({ defaultMessage: "Bed options", })} {intl.formatMessage({ defaultMessage: "Based on availability", })}
) }