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

import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
import { Typography } from "@scandic-hotels/design-system/Typography"

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

import type { PackageSchema } from "@scandic-hotels/trpc/types/bookingConfirmation"

interface BreakfastProps {
  breakfast: PackageSchema | false | undefined
  breakfastIncluded: boolean
  guests: string
}

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

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

  if (breakfastIncluded || breakfast) {
    const price = breakfast
      ? formatPrice(intl, breakfast.totalPrice, breakfast.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.textSecondary}>{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
}