import { useIntl } from "react-intl"

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}>
        <Typography variant="Body/Supporting text (caption)/smBold">
          <p>
            {intl.formatMessage({
              id: "common.from",
              defaultMessage: "From",
            })}
          </p>
        </Typography>
        <div className={styles.voucher}>
          <Typography variant="Title/Subtitle/md">
            <p>{productTypeVoucher.numberOfVouchers}</p>
          </Typography>
          <Typography variant="Body/Supporting text (caption)/smRegular">
            <p>
              {intl.formatMessage(
                {
                  id: "price.numberOfVouchers",
                  defaultMessage:
                    "{numberOfVouchers, plural, one {Voucher} other {Vouchers}}",
                },
                {
                  numberOfVouchers: productTypeVoucher.numberOfVouchers,
                }
              )}
            </p>
          </Typography>
        </div>
      </div>
    </div>
  )
}