import { useIntl } from 'react-intl'

import Caption from '@scandic-hotels/design-system/Caption'
import Subtitle from '@scandic-hotels/design-system/Subtitle'

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

export type PointsRowProps = {
  pointsPerStay: number
  additionalPricePerStay?: number
  additionalPriceCurrency?: string
}
export 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>
  )
}