Files
web/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Room/index.tsx
2025-04-28 12:40:52 +00:00

44 lines
1.1 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 { useMyStayStore } from "@/stores/my-stay"
import styles from "./room.module.css"
export default function Room() {
const intl = useIntl()
const { bookedRoom, rooms } = useMyStayStore((state) => ({
bookedRoom: state.bookedRoom,
rooms: state.rooms,
}))
const roomMsg = intl.formatMessage({
defaultMessage: "Room",
})
const roomsMsg = intl.formatMessage({
defaultMessage: "Rooms",
})
const room =
rooms.length > 1 ? `${rooms.length} ${roomsMsg}` : bookedRoom.roomName
const title = rooms.length > 1 ? roomsMsg : roomMsg
return (
<div className={styles.row}>
<div className={styles.label}>
<MaterialIcon icon="bed" />
<Typography variant="Body/Paragraph/mdRegular">
<p className={styles.textDefault}>{title}</p>
</Typography>
</div>
<Typography variant="Body/Paragraph/mdRegular">
<p>{room}</p>
</Typography>
</div>
)
}