"use client" import { useState } from "react" import { useIntl } from "react-intl" import { ChevronRightIcon } from "@/components/Icons" import Accordion from "@/components/TempDesignSystem/Accordion" import AccordionItem from "@/components/TempDesignSystem/Accordion/AccordionItem" 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 Contact from "../Contact" import styles from "./readMore.module.css" import { DetailedAmenity, ParkingProps, ReadMoreProps, } from "@/types/components/hotelReservation/selectHotel/selectHotel" import { Hotel } from "@/types/hotel" function getAmenitiesList(hotel: Hotel) { const detailedAmenities: DetailedAmenity[] = Object.entries( hotel.hotelFacts.hotelFacilityDetail ).map(([key, value]) => ({ name: key, ...value })) // Remove Parking facilities since parking accordion is based on hotel.parking const simpleAmenities = hotel.detailedFacilities.filter( (facility) => !facility.name.startsWith("Parking") ) return [...detailedAmenities, ...simpleAmenities] } export default function ReadMore({ hotel, hotelId }: ReadMoreProps) { const intl = useIntl() const [sidePeekOpen, setSidePeekOpen] = useState(false) const amenitiesList = getAmenitiesList(hotel) return ( <> { setSidePeekOpen(false) }} >

{intl.formatMessage({ id: "Practical information" })} {/* parking */} {hotel.parking.length ? ( {hotel.parking.map((p) => ( ))} ) : null} TODO: What content should be in the accessibility section? {amenitiesList.map((amenity) => { return "description" in amenity ? ( {amenity.description} ) : (

{amenity.name}

) })} {/* TODO: handle linking to Hotel Page */}

) } function Parking({ parking }: ParkingProps) { const intl = useIntl() return (

{`${intl.formatMessage({ id: parking.type })} (${parking.name})`}

{`${intl.formatMessage({ id: "Number of charging points for electric cars", })}: ${parking.numberOfChargingSpaces}`}
{`${intl.formatMessage({ id: "Parking can be reserved in advance" })}: ${parking.canMakeReservation ? intl.formatMessage({ id: "Yes" }) : intl.formatMessage({ id: "No" })}`}
{`${intl.formatMessage({ id: "Number of parking spots" })}: ${parking.numberOfParkingSpots}`}
{`${intl.formatMessage({ id: "Distance to hotel" })}: ${parking.distanceToHotel}`}
{`${intl.formatMessage({ id: "Address" })}: ${parking.address}`}

) }