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

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({ id: "Points" })}
      </Caption>
      {additionalPricePerStay ? (
        <>
          +
          <Subtitle type="two" color="uiTextHighContrast">
            {additionalPricePerStay}
          </Subtitle>
          <Caption color="uiTextHighContrast">
            {additionalPriceCurrency}
          </Caption>
        </>
      ) : null}
    </div>
  )
}