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({
            id: "parkingInformation.freeParking",
            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({
                  id: "parkingInformation.atACost",
                  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({
                    id: "common.from",
                    defaultMessage: "From",
                  })}
                </dt>
                {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
                <dd>{`${startTime}-${endTime}`}</dd>
              </div>
            </Typography>
          ) : null}
        </div>
      ))}
    </dl>
  )
}