import { useIntl } from "react-intl"

import { CurrencyEnum } from "@scandic-hotels/common/constants/currency"
import Caption from "@scandic-hotels/design-system/Caption"
import Subtitle from "@scandic-hotels/design-system/Subtitle"

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

import type { ProductTypeVoucher } from "@scandic-hotels/trpc/types/availability"

export default function HotelVoucherCard({
  productTypeVoucher,
}: {
  productTypeVoucher: ProductTypeVoucher
}) {
  const intl = useIntl()
  return (
    <div className={styles.voucherCard}>
      <div className={styles.voucherRow}>
        <Caption>
          {intl.formatMessage({
            defaultMessage: "From",
          })}
        </Caption>
        <div className={styles.voucher}>
          <Subtitle type="two" color="uiTextHighContrast">
            {productTypeVoucher.numberOfVouchers}
          </Subtitle>
          <Caption color="uiTextHighContrast" className={styles.currency}>
            {CurrencyEnum.Voucher}
          </Caption>
        </div>
      </div>
    </div>
  )
}