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>
  )
}