import { useIntl } from 'react-intl'

import Caption from '../../Caption'
import Subtitle from '../../Subtitle'

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

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

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