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

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

import { useMyStayStore } from "@/stores/my-stay"

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

export default function Reference() {
  const intl = useIntl()
  const { cancellationNumber, confirmationNumber, isCancelled, rooms } =
    useMyStayStore((state) => ({
      cancellationNumber: state.bookedRoom.cancellationNumber,
      confirmationNumber: state.bookedRoom.confirmationNumber,
      isCancelled: state.bookedRoom.isCancelled,
      rooms: state.rooms,
    }))

  if (rooms.length > 1) {
    return null
  }

  const title = isCancelled
    ? intl.formatMessage({
        defaultMessage: "Cancellation number",
      })
    : intl.formatMessage({
        defaultMessage: "Booking number",
      })

  return (
    <>
      <div className={styles.row}>
        <Typography variant="Body/Lead text">
          <p className={styles.textDefault}>{title}</p>
        </Typography>
        <Typography variant="Title/Subtitle/md">
          <p className={styles.textDefault}>
            {isCancelled ? <s>{cancellationNumber}</s> : confirmationNumber}
          </p>
        </Typography>
      </div>
      <Divider />
    </>
  )
}