import { useIntl } from "react-intl"
import { Typography } from "../../Typography"

interface RoomPriceProps extends React.HTMLAttributes<HTMLParagraphElement> {
  price: number
  currency: string
  includePerNight?: boolean
}

export function RoomPrice({
  price,
  currency,
  children,
  includePerNight = true,
  ...props
}: RoomPriceProps) {
  const intl = useIntl()

  return (
    <p {...props}>
      <Typography variant="Title/Subtitle/md">
        <span>{price}</span>
      </Typography>
      <Typography variant="Body/Paragraph/mdBold">
        <span> {currency}</span>
      </Typography>
      {children}
      {includePerNight ? (
        <Typography variant="Body/Supporting text (caption)/smRegular">
          {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
          <span>
            /
            {intl.formatMessage({
              id: "common.night",
              defaultMessage: "night",
            })}
          </span>
        </Typography>
      ) : null}
    </p>
  )
}