import { useIntl } from "react-intl" import ImageGallery from "@/components/ImageGallery" import SidePeek from "@/components/TempDesignSystem/SidePeek" import Body from "@/components/TempDesignSystem/Text/Body" import Subtitle from "@/components/TempDesignSystem/Text/Subtitle" import { getBedIcon } from "./bedIcon" import { getFacilityIcon } from "./facilityIcon" import styles from "./roomSidePeek.module.css" import { SidePeekEnum } from "@/types/components/hotelReservation/sidePeek" import type { RoomSidePeekProps } from "@/types/components/sidePeeks/roomSidePeek" export default function RoomSidePeek({ room, activeSidePeek, close, }: RoomSidePeekProps) { const intl = useIntl() const roomSize = room.roomSize const occupancy = room.occupancy.total const roomDescription = room.descriptions.medium const images = room.images return (
{roomSize.min === roomSize.max ? roomSize.min : `${roomSize.min} - ${roomSize.max}`} m².{" "} {intl.formatMessage( { id: "booking.accommodatesUpTo" }, { nrOfGuests: occupancy } )}
{roomDescription}
{intl.formatMessage({ id: "booking.thisRoomIsEquippedWith" })}
    {room.roomFacilities .sort((a, b) => a.sortOrder - b.sortOrder) .map((facility) => { const Icon = getFacilityIcon(facility.icon) return (
  • {Icon && ( )} {facility.name}
    • ) })}
{intl.formatMessage({ id: "booking.bedOptions" })} {intl.formatMessage({ id: "booking.basedOnAvailability" })}
    {room.roomTypes.map((roomType) => { const BedIcon = getBedIcon(roomType.mainBed.type) return (
  • {BedIcon && ( )} {roomType.mainBed.description}
    • ) })}
) }