import { useIntl } from "react-intl"

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

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

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

export default function HotelPointsRow({
  pointsPerStay,
  additionalPricePerStay,
  additionalPriceCurrency,
}: PointsRowProps) {
  const intl = useIntl()

  return (
    <div className={styles.poinstRow}>
      <Subtitle type="two" color="uiTextHighContrast">
        {pointsPerStay}
      </Subtitle>
      <Caption color="uiTextHighContrast">
        {intl.formatMessage({
          defaultMessage: "Points",
        })}
      </Caption>
      {additionalPricePerStay ? (
        <>
          {"+"}
          <Subtitle type="two" color="uiTextHighContrast">
            {additionalPricePerStay}
          </Subtitle>
          <Caption color="uiTextHighContrast">
            {additionalPriceCurrency}
          </Caption>
        </>
      ) : null}
    </div>
  )
}