import { useIntl } from "react-intl"

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

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

import type { PointsCardProps } from "@/types/components/hotelReservation/selectHotel/priceCardProps"

export default function HotelPointsCard({
  productTypePoints,
  redemptionPrice,
}: PointsCardProps) {
  const intl = useIntl()
  const pointsPerStay =
    productTypePoints?.localPrice.pricePerStay ?? redemptionPrice

  return (
    <div className={styles.poinstRow}>
      <Subtitle type="two" color="uiTextHighContrast">
        {pointsPerStay}
      </Subtitle>
      <Caption color="uiTextHighContrast">
        {intl.formatMessage({ id: "Points" })}
      </Caption>
      {productTypePoints?.localPrice.pricePerStay ? (
        <>
          +
          <Subtitle type="two" color="uiTextHighContrast">
            {productTypePoints.localPrice.pricePerStay}
          </Subtitle>
          <Caption color="uiTextHighContrast">
            {productTypePoints.localPrice.currency}
          </Caption>
        </>
      ) : null}
    </div>
  )
}