web/packages/design-system/lib/components/ParkingInformation/ParkingPrices/index.tsx

'use client'

import { useIntl } from 'react-intl'

import { Typography } from '../../Typography'

import { formatPrice } from '@scandic-hotels/common/utils/numberFormatting'

import { type Parking, ParkingPricePeriods } from '../parkingInformationTypes'
import { getPeriod } from './utils'

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

interface ParkingPricesProps
  extends Pick<Parking['pricing'], 'freeParking'>,
    Pick<NonNullable<Parking['pricing']['localCurrency']>, 'currency'> {
  pricing: NonNullable<Parking['pricing']['localCurrency']>['ordinary']
}

export default function ParkingPrices({
  currency = '',
  freeParking,
  pricing,
}: ParkingPricesProps) {
  const intl = useIntl()

  if (freeParking) {
    return (
      <Typography variant="Body/Paragraph/mdBold">
        <p className={styles.wrapper}>
          {intl.formatMessage({ defaultMessage: 'Free parking' })}
        </p>
      </Typography>
    )
  }

  const filteredPricing = pricing.filter((price) => price.amount > 0)

  if (filteredPricing.length === 0) {
    return (
      <dl className={styles.wrapper}>
        <div className={styles.period}>
          <div className={styles.information}>
            <Typography variant="Body/Paragraph/mdBold">
              <dt>{getPeriod(intl, 'Hour')}</dt>
            </Typography>
            <Typography variant="Body/Paragraph/mdRegular">
              <dd>
                {intl.formatMessage({
                  defaultMessage: 'At a cost',
                })}
              </dd>
            </Typography>
          </div>
        </div>
      </dl>
    )
  }

  return (
    <dl className={styles.wrapper}>
      {filteredPricing.map(({ period, amount, startTime, endTime }) => (
        <div key={period} className={styles.period}>
          <div className={styles.information}>
            <Typography variant="Body/Paragraph/mdBold">
              <dt>{getPeriod(intl, period)}</dt>
            </Typography>
            <Typography variant="Body/Paragraph/mdRegular">
              <dd>{formatPrice(intl, amount, currency)}</dd>
            </Typography>
          </div>
          {startTime && endTime && period !== ParkingPricePeriods.allDay ? (
            <Typography variant="Body/Paragraph/mdRegular">
              <div className={styles.information}>
                <dt>{intl.formatMessage({ defaultMessage: 'From' })}</dt>
                <dd>{`${startTime}-${endTime}`}</dd>
              </div>
            </Typography>
          ) : null}
        </div>
      ))}
    </dl>
  )
}