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

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

import { useRoomContext } from "@/contexts/SelectRate/Room"
import { formatPrice } from "@/utils/numberFormatting"

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

export default function PetRoomMessage() {
  const intl = useIntl()
  const { petRoomPackage } = useRoomContext()
  if (!petRoomPackage) {
    return null
  }
  return (
    <Typography variant="Body/Supporting text (caption)/smRegular">
      <p className={styles.additionalInformation}>
        {intl.formatMessage(
          {
            defaultMessage:
              "Pet-friendly rooms include a charge of approx. <b>{price}/stay</b>",
          },
          {
            b: (str) => (
              <Typography variant="Body/Supporting text (caption)/smBold">
                <span className={styles.additionalInformationPrice}>{str}</span>
              </Typography>
            ),
            price: formatPrice(
              intl,
              petRoomPackage.localPrice.price,
              petRoomPackage.localPrice.currency
            ),
          }
        )}
      </p>
    </Typography>
  )
}
