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

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

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 (
      <>
        <Typography variant="Body/Supporting text (caption)/smBold">
          {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
          <p>∙</p>
        </Typography>
        <Typography variant="Body/Supporting text (caption)/smBold">
          <h4>
            {intl.formatMessage(
              {
                defaultMessage: "{roomSize} m²",
              },
              { roomSize: roomSize.min }
            )}
          </h4>
        </Typography>
      </>
    )
  }
  return (
    <>
      <Typography variant="Body/Supporting text (caption)/smBold">
        {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
        <p>∙</p>
      </Typography>
      <Typography variant="Body/Supporting text (caption)/smBold">
        <h4>
          {intl.formatMessage(
            {
              defaultMessage: "{roomSizeMin} - {roomSizeMax} m²",
            },
            {
              roomSizeMin: roomSize.min,
              roomSizeMax: roomSize.max,
            }
          )}
        </h4>
      </Typography>
    </>
  )
}
