87 lines
2.7 KiB
TypeScript
87 lines
2.7 KiB
TypeScript
"use client"
|
|
|
|
import { useIntl } from "react-intl"
|
|
|
|
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
|
|
import { Typography } from "@scandic-hotels/design-system/Typography"
|
|
|
|
import { getBedIconName } from "../RoomSidePeek/bedIcon"
|
|
import { FacilityIcon } from "../RoomSidePeek/facilityIcon"
|
|
|
|
import styles from "./bookedRoomSidePeek.module.css"
|
|
|
|
import type { RoomDetailsProps } from "@/types/components/sidePeeks/bookedRoomSidePeek"
|
|
|
|
export default function RoomDetails({
|
|
roomDescription,
|
|
roomFacilities,
|
|
roomTypes,
|
|
}: RoomDetailsProps) {
|
|
const intl = useIntl()
|
|
|
|
const sortedFacilities = roomFacilities
|
|
.sort((a, b) => a.sortOrder - b.sortOrder)
|
|
.map((facility) => {
|
|
const Icon = <FacilityIcon name={facility.icon} color="Icon/Default" />
|
|
return { ...facility, Icon }
|
|
})
|
|
|
|
const bedOptions = roomTypes.map((roomType) => {
|
|
const bedIconName = getBedIconName(roomType.mainBed.type)
|
|
return { ...roomType, bedIconName }
|
|
})
|
|
|
|
return (
|
|
<div className={styles.descriptionContainer}>
|
|
<Typography variant="Body/Paragraph/mdRegular">
|
|
<p className={styles.text}>{roomDescription}</p>
|
|
</Typography>
|
|
<div className={styles.listContainer}>
|
|
<Typography variant="Title/Subtitle/md">
|
|
<p className={styles.text}>
|
|
{intl.formatMessage({
|
|
defaultMessage: "This room is equipped with",
|
|
})}
|
|
</p>
|
|
</Typography>
|
|
<ul className={styles.facilityList}>
|
|
{sortedFacilities.map(({ name, Icon }) => (
|
|
<li key={name}>
|
|
{Icon && Icon}
|
|
<Typography variant="Body/Paragraph/mdRegular">
|
|
<span className={styles.listText}>{name}</span>
|
|
</Typography>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
<div className={styles.listContainer}>
|
|
<Typography variant="Title/Subtitle/md">
|
|
<p className={styles.text}>
|
|
{intl.formatMessage({
|
|
defaultMessage: "Bed options",
|
|
})}
|
|
</p>
|
|
</Typography>
|
|
<Typography variant="Body/Paragraph/mdRegular">
|
|
<p className={styles.text}>
|
|
{intl.formatMessage({
|
|
defaultMessage: "Based on availability",
|
|
})}
|
|
</p>
|
|
</Typography>
|
|
<ul className={styles.bedOptions}>
|
|
{bedOptions.map(({ code, mainBed, bedIconName }) => (
|
|
<li key={code}>
|
|
<MaterialIcon icon={bedIconName} color="Icon/Default" size={24} />
|
|
<Typography variant="Body/Paragraph/mdRegular">
|
|
<span className={styles.listText}>{mainBed.description}</span>
|
|
</Typography>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|