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

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

import { formatPrice } from "@/utils/numberFormatting"

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

import type { BreakfastPackage } from "@/types/components/hotelReservation/breakfast"

interface BreakfastProps {
  adults: number
  breakfast: BreakfastPackage | false | undefined
  breakfastIncluded: boolean
  guests: string
  nights: number
}

export default function Breakfast({
  adults,
  breakfast,
  breakfastIncluded,
  guests,
  nights,
}: BreakfastProps) {
  const intl = useIntl()

  const breakfastBuffet = intl.formatMessage({
    defaultMessage: "Breakfast buffet",
  })

  if (breakfastIncluded || breakfast) {
    const price = breakfast
      ? formatPrice(
          intl,
          breakfast.localPrice.price * adults * nights,
          breakfast.localPrice.currency
        )
      : intl.formatMessage({ defaultMessage: "Included" })
    return (
      <div className={styles.entry}>
        <div>
          <Typography variant="Body/Paragraph/mdRegular">
            <p className={styles.textDefault}>{breakfastBuffet}</p>
          </Typography>
          <Typography variant="Body/Supporting text (caption)/smRegular">
            <p className={styles.uiTextMediumContrast}>{guests}</p>
          </Typography>
        </div>
        <Typography variant="Body/Paragraph/mdRegular">
          <p className={styles.textDefault}>{price}</p>
        </Typography>
      </div>
    )
  }

  if (breakfast === false) {
    const noBreakfast = intl.formatMessage({ defaultMessage: "No breakfast" })
    return (
      <div className={styles.entry}>
        <Typography variant="Body/Paragraph/mdRegular">
          <p className={styles.textDefault}>{breakfastBuffet}</p>
        </Typography>
        <Typography variant="Body/Paragraph/mdRegular">
          <p className={styles.textDefault}>{noBreakfast}</p>
        </Typography>
      </div>
    )
  }

  return null
}