"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 IconChip from "@/components/TempDesignSystem/IconChip"

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

interface BookingCodeRowProps {
  bookingCode?: string
}

export default function BookingCodeRow({ bookingCode }: BookingCodeRowProps) {
  const intl = useIntl()

  if (!bookingCode) {
    return null
  }

  const text = intl.formatMessage(
    { defaultMessage: "<strong>Booking code</strong>: {value}" },
    {
      value: bookingCode,
      strong: (text) => (
        <Typography variant="Body/Supporting text (caption)/smBold">
          <strong>{text}</strong>
        </Typography>
      ),
    }
  )

  return (
    <tr className={styles.row}>
      <td colSpan={2} align="left">
        <Typography variant="Body/Supporting text (caption)/smRegular">
          <IconChip
            color="blue"
            icon={<DiscountIcon color="Icon/Feedback/Information" />}
          >
            {text}
          </IconChip>
        </Typography>
      </td>
    </tr>
  )
}