import { useIntl } from "react-intl"

import Caption from "../../Caption"

import styles from "./hotelVoucherCard.module.css"
import { Typography } from "../../Typography"

type ProductTypeVoucher = {
  numberOfVouchers: number
}

export default function HotelVoucherCard({
  productTypeVoucher,
}: {
  productTypeVoucher: ProductTypeVoucher
}) {
  const intl = useIntl()
  return (
    <div className={styles.voucherCard}>
      <div className={styles.voucherRow}>
        <Caption>
          {intl.formatMessage({
            id: "common.from",
            defaultMessage: "From",
          })}
        </Caption>
        <div className={styles.voucher}>
          <Typography variant="Title/Subtitle/md">
            <p>{productTypeVoucher.numberOfVouchers}</p>
          </Typography>
          <Caption color="uiTextHighContrast" className={styles.currency}>
            {intl.formatMessage(
              {
                id: "price.numberOfVouchers",
                defaultMessage:
                  "{numberOfVouchers, plural, one {Voucher} other {Vouchers}}",
              },
              {
                numberOfVouchers: productTypeVoucher.numberOfVouchers,
              }
            )}
          </Caption>
        </div>
      </div>
    </div>
  )
}