"use client" import { useState } from "react" import { useIntl } from "react-intl" import { MeasureIcon, PersonIcon } from "@/components/Icons" import Image from "@/components/Image" import Divider from "../Divider" import ShowMoreButton from "../ShowMoreButton" import Body from "../Text/Body" import Caption from "../Text/Caption" import Subtitle from "../Text/Subtitle" import { translateRoomLighting, translateSeatingType } from "./utils" import styles from "./meetingRoomCard.module.css" import type { MeetingRoom } from "@/types/components/hotelPage/meetingRooms" interface MeetingRoomCardProps { room: MeetingRoom } export default function MeetingRoomCard({ room }: MeetingRoomCardProps) { const intl = useIntl() const [opened, setOpened] = useState(false) const roomSeatings = room.seatings.map((seating) => { return seating.capacity }) const maxSeatings = Math.max(...roomSeatings) const image = room.content.images[0] function handleShowMore() { setOpened((state) => !state) } return (
{image.metaData.altText
{room.name}
{room.size} m2
{intl.formatMessage( { id: "max {seatings} pers" }, { seatings: maxSeatings } )}
{room.content.texts.descriptions.medium ? ( {room.content.texts.descriptions.medium} ) : null} {opened && (
{room.seatings.map((seating, idx) => (
{translateSeatingType(seating.type, intl)} {intl.formatMessage( { id: "{number} people" }, { number: seating.capacity } )}
))}
{intl.formatMessage({ id: "Location in hotel", })} {intl.formatMessage( { id: "Floor {floorNumber}" }, { floorNumber: `${room.floorNumber}`, } )}
{intl.formatMessage({ id: "Lighting", })} {translateRoomLighting(room.lighting, intl)}
{room.doorHeight && room.doorWidth ? (
{intl.formatMessage({ id: "Access size", })} {room.doorHeight} x {room.doorWidth} m
) : null} {room.length && room.width && room.height ? (
{intl.formatMessage({ id: "Dimensions", })} {room.length} x {room.width} x {room.height} m
) : null}
)}
) }