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

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

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

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

export default function BookingCode() {
  const intl = useIntl()
  const bookingCode = useMyStayStore((state) => state.bookedRoom.bookingCode)

  if (!bookingCode) {
    return null
  }

  return (
    <div className={styles.row}>
      <Typography variant="Body/Supporting text (caption)/smRegular">
        <p>
          {intl.formatMessage({
            defaultMessage: "Booking code",
          })}
        </p>
      </Typography>

      <IconChip
        color="blue"
        icon={<DiscountIcon color="Icon/Feedback/Information" />}
      >
        <Typography variant="Body/Supporting text (caption)/smRegular">
          <span>{bookingCode}</span>
        </Typography>
      </IconChip>
    </div>
  )
}