web/apps/scandic-web/components/HotelReservation/HotelCard/HotelChequeCard/index.tsx

import { useIntl } from "react-intl"

import Caption from "@/components/TempDesignSystem/Text/Caption"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"

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

import { CurrencyEnum } from "@/types/enums/currency"
import type { ProductTypeCheque } from "@/types/trpc/routers/hotel/availability"

export default function HotelChequeCard({
  productTypeCheque,
}: {
  productTypeCheque: ProductTypeCheque
}) {
  const intl = useIntl()
  return (
    <div className={styles.chequeCard}>
      <div className={styles.chequeRow}>
        <Caption>{intl.formatMessage({ id: "From" })}</Caption>
        <div className={styles.cheque}>
          <Subtitle type="two" color="uiTextHighContrast">
            {productTypeCheque.localPrice.numberOfBonusCheques}
          </Subtitle>
          <Caption color="uiTextHighContrast" className={styles.currency}>
            {CurrencyEnum.CC}
          </Caption>
          {productTypeCheque.localPrice.additionalPricePerStay && (
            <>
              {"+"}
              <Subtitle type="two" color="uiTextHighContrast">
                {productTypeCheque.localPrice.additionalPricePerStay}
              </Subtitle>
              <Caption color="uiTextHighContrast">
                {productTypeCheque.localPrice.currency}
              </Caption>
            </>
          )}
        </div>
      </div>
      {productTypeCheque.requestedPrice ? (
        <div className={styles.chequeRow}>
          <Caption color="uiTextMediumContrast">
            {intl.formatMessage({ id: "Approx." })}
          </Caption>
          <Caption color={"uiTextMediumContrast"}>
            {productTypeCheque.requestedPrice.numberOfBonusCheques}{" "}
            {CurrencyEnum.CC}
            {productTypeCheque.requestedPrice.additionalPricePerStay
              ? " + "
              : ""}
            {productTypeCheque.requestedPrice.additionalPricePerStay}{" "}
            {productTypeCheque.requestedPrice.currency}
          </Caption>
        </div>
      ) : null}
    </div>
  )
}