import { useIntl } from 'react-intl'

import Caption from '../../Caption'
import Subtitle from '../../Subtitle'

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

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}>
          <Subtitle type="two" color="uiTextHighContrast">
            {productTypeVoucher.numberOfVouchers}
          </Subtitle>
          <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>
  )
}