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

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

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

import IconChip from "@/components/TempDesignSystem/IconChip"

export default function BookingCode() {
  const intl = useIntl()

  const bookingCode = useMyStayStore((state) => state.bookedRoom.bookingCode)

  if (!bookingCode) {
    return null
  }

  return (
    <Typography variant="Body/Supporting text (caption)/smBold">
      <IconChip
        color="blue"
        icon={<DiscountIcon color="Icon/Feedback/Information" />}
      >
        {intl.formatMessage(
          {
            defaultMessage: "<strong>Booking code</strong>: {value}",
          },
          {
            value: bookingCode,
            strong: (text) => (
              <Typography variant="Body/Supporting text (caption)/smBold">
                <strong>{text}</strong>
              </Typography>
            ),
          }
        )}
      </IconChip>
    </Typography>
  )
}
