"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({
    id: "common.room",
    defaultMessage: "Room",
  })
  const roomsMsg = intl.formatMessage({
    id: "common.rooms",
    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 className={styles.title}>{room}</p>
      </Typography>
    </div>
  )
}