web/packages/design-system/lib/components/HotelCard/HotelPointsRow/index.tsx

import { useIntl } from "react-intl"

import { RoomPrice } from "../../HotelCard/RoomPrice"
import { Typography } from "../../Typography"

import { CurrencyEnum } from "@scandic-hotels/common/constants/currency"
import styles from "./hotelPointsRow.module.css"

export type PointsRowProps = {
  pointsPerStay: number
  additionalPricePerStay?: number
  additionalPriceCurrency?: string
  pointsCurrency?: CurrencyEnum
}
export function HotelPointsRow({
  pointsPerStay,
  additionalPricePerStay,
  additionalPriceCurrency,
  pointsCurrency,
}: PointsRowProps) {
  const intl = useIntl()

  return (
    <RoomPrice
      className={styles.roomPrice}
      price={pointsPerStay}
      currency={
        pointsCurrency ??
        intl.formatMessage({
          id: "common.points",
          defaultMessage: "Points",
        })
      }
      includePerNight={false}
    >
      {additionalPricePerStay ? (
        <>
          <Typography variant="Body/Paragraph/mdBold">
            {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
            <span> + </span>
          </Typography>
          <Typography variant="Title/Subtitle/md">
            <span>{additionalPricePerStay}</span>
          </Typography>
          <Typography variant="Body/Paragraph/mdBold">
            <span> {additionalPriceCurrency}</span>
          </Typography>
        </>
      ) : null}
    </RoomPrice>
  )
}