import { useState } from "react" import { useIntl } from "react-intl" import { ChevronRightSmallIcon } from "@/components/Icons" import Button from "@/components/TempDesignSystem/Button" import SidePeek from "@/components/TempDesignSystem/SidePeek" import Body from "@/components/TempDesignSystem/Text/Body" import Subtitle from "@/components/TempDesignSystem/Text/Subtitle" import ImageGallery from "../../ImageGallery" import { getFacilityIcon } from "./facilityIcon" import styles from "./roomSidePeek.module.css" import type { RoomSidePeekProps } from "@/types/components/hotelReservation/selectRate/roomSidePeek" export default function RoomSidePeek({ selectedRoom, roomConfiguration, }: RoomSidePeekProps) { const [isSidePeekOpen, setIsSidePeekOpen] = useState(false) const intl = useIntl() const roomSize = selectedRoom?.roomSize const occupancy = selectedRoom?.occupancy.total const roomDescription = selectedRoom?.descriptions.medium const images = selectedRoom?.images return (
setIsSidePeekOpen(false)} > {roomSize?.min === roomSize?.max ? roomSize?.min : `${roomSize?.min} - ${roomSize?.max}`} m².{" "} {intl.formatMessage( { id: "booking.accommodatesUpTo", }, { nrOfGuests: occupancy } )} {images && (
)} {roomDescription} {intl.formatMessage({ id: "booking.thisRoomIsEquippedWith" })}
) }