"use client" import { useState } from "react" import { useIntl } from "react-intl" import { Divider } from "@scandic-hotels/design-system/Divider" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" import Image from "@/components/Image" 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.at(0) function handleShowMore() { setOpened((state) => !state) } return (
{image?.metaData.altText
{room.name}
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */} {room.size} m²
{intl.formatMessage( { defaultMessage: "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( { defaultMessage: "{number} people", }, { number: seating.capacity } )}
))}
{intl.formatMessage({ defaultMessage: "Location in hotel", })} {intl.formatMessage( { defaultMessage: "Floor {floorNumber}", }, { floorNumber: `${room.floorNumber}`, } )}
{intl.formatMessage({ defaultMessage: "Lighting", })} {translateRoomLighting(room.lighting, intl)}
{room.doorHeight && room.doorWidth ? (
{intl.formatMessage({ defaultMessage: "Access size", })} {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */} {room.doorHeight} x {room.doorWidth} m
) : null} {room.length && room.width && room.height ? (
{intl.formatMessage({ defaultMessage: "Dimensions", })} {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */} {room.length} x {room.width} x {room.height} m
) : null}
)}
) } const fallbackImage = "data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="