import { useIntl } from "react-intl" import { MaterialIcon } from "@scandic-hotels/design-system/Icons" import ImageGallery from "@/components/ImageGallery" import SidePeek from "@/components/TempDesignSystem/SidePeek" 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 { getBedIconName } from "./bedIcon" import { FacilityIcon } 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 totalOccupancy = room.totalOccupancy const roomDescription = room.descriptions.medium const galleryImages = mapApiImagesToGalleryImages(room.images) return (
{totalOccupancy && ( {intl.formatMessage( { id: "Max. {max, plural, one {{range} guest} other {{range} guests}}", }, { max: totalOccupancy.max, range: totalOccupancy.range, } )} )} {roomSize && ( {roomSize.min === roomSize.max ? intl.formatMessage( { id: "{roomSize} m²" }, { roomSize: roomSize.min, } ) : intl.formatMessage( { id: "{roomSizeMin}–{roomSizeMax} m²", }, { roomSizeMin: roomSize.min, roomSizeMax: roomSize.max, } )} )}
{roomDescription}
{intl.formatMessage({ id: "Room amenities" })}
    {room.roomFacilities .sort((a, b) => a.sortOrder - b.sortOrder) .map((facility) => { const Icon = ( ) return (
  • {Icon && Icon} {facility.name}
    • ) })}
{intl.formatMessage({ id: "Bed options" })} {intl.formatMessage({ id: "Based on availability" })}
    {room.roomTypes.map((roomType) => { const bedIcon = getBedIconName(roomType.mainBed.type) return (
  • {roomType.mainBed.description}
    • ) })}
) }