"use client"
import { useIntl } from "react-intl"

import { Typography } from "@scandic-hotels/design-system/Typography"

import { useRatesStore } from "@/stores/select-rate"

import RoomSize from "./RoomSize"

import styles from "./details.module.css"

export default function Details({ roomTypeCode }: { roomTypeCode: string }) {
  const intl = useIntl()
  const roomCategories = useRatesStore((state) => state.roomCategories)

  const selectedRoom = roomCategories.find((roomCategory) =>
    roomCategory.roomTypes.find((roomType) => roomType.code === roomTypeCode)
  )

  const { name, occupancy, roomSize } = selectedRoom || {}

  return (
    <>
      <div className={styles.specification}>
        {occupancy && (
          <Typography variant="Body/Supporting text (caption)/smBold">
            <h4>
              {occupancy.max === occupancy.min
                ? intl.formatMessage(
                    {
                      defaultMessage:
                        "{guests, plural, one {# guest} other {# guests}}",
                    },
                    { guests: occupancy.max }
                  )
                : intl.formatMessage(
                    {
                      defaultMessage: "{min}-{max} guests",
                    },
                    {
                      min: occupancy.min,
                      max: occupancy.max,
                    }
                  )}
            </h4>
          </Typography>
        )}
        <RoomSize roomSize={roomSize} />
      </div>
      <div className={styles.roomDetails}>
        <Typography variant="Title/Subtitle/lg">
          <h2>{name}</h2>
        </Typography>
      </div>
    </>
  )
}
