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

import Caption from "@/components/TempDesignSystem/Text/Caption"

import type { RoomSizeProps } from "@/types/components/hotelReservation/selectRate/roomListItem"

export default function RoomSize({ roomSize }: RoomSizeProps) {
  const intl = useIntl()

  if (!roomSize) {
    return null
  }

  if (roomSize.min === roomSize.max) {
    return (
      <>
        {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
        <Caption color="uiTextMediumContrast">∙</Caption>
        <Caption color="uiTextMediumContrast">
          {intl.formatMessage(
            {
              defaultMessage: "{roomSize} m²",
            },
            { roomSize: roomSize.min }
          )}
        </Caption>
      </>
    )
  }
  return (
    <>
      {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
      <Caption color="uiTextMediumContrast">∙</Caption>
      <Caption color="uiTextMediumContrast">
        {intl.formatMessage(
          {
            defaultMessage: "{roomSizeMin} - {roomSizeMax} m²",
          },
          {
            roomSizeMin: roomSize.min,
            roomSizeMax: roomSize.max,
          }
        )}
      </Caption>
    </>
  )
}
