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

'use client'

import { useIntl } from 'react-intl'

import { Divider } from '../Divider'
import { MaterialIcon } from '../Icons/MaterialIcon'
import { Typography } from '../Typography'
import ButtonLink from '../ButtonLink'
import ParkingList from './ParkingList'
import ParkingPrices from './ParkingPrices'

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

import type { Parking } from './parkingInformationTypes'

type ParkingInformationProps = {
  parking: Parking
  showExternalParkingButton?: boolean
}

export default function ParkingInformation({
  parking,
  showExternalParkingButton = true,
}: ParkingInformationProps) {
  const intl = useIntl()
  const title = `${parking.type}${parking.name ? ` (${parking.name})` : ''}`

  return (
    <div className={styles.parkingInformation}>
      <div className={styles.list}>
        <Typography variant="Title/Subtitle/md">
          <h4 className={styles.heading}>{title}</h4>
        </Typography>
        <ParkingList
          numberOfChargingSpaces={parking.numberOfChargingSpaces}
          canMakeReservation={parking.canMakeReservation}
          numberOfParkingSpots={parking.numberOfParkingSpots}
          distanceToHotel={parking.distanceToHotel}
          address={parking.address}
        />
      </div>
      <div className={styles.prices}>
        <Typography variant="Body/Paragraph/mdBold">
          <h5 className={styles.heading}>
            {intl.formatMessage({
              id: 'parkingInformation.prices',
              defaultMessage: 'Prices',
            })}
          </h5>
        </Typography>
        <div className={styles.priceWrapper}>
          <Typography variant="Title/Overline/sm">
            <h6 className={styles.priceHeading}>
              {intl.formatMessage({
                id: 'parkingInformation.weekdayPrices',
                defaultMessage: 'Weekday prices',
              })}
            </h6>
          </Typography>
          <Divider />
          {parking.pricing.localCurrency ? (
            <ParkingPrices
              currency={parking.pricing.localCurrency.currency}
              freeParking={parking.pricing.freeParking}
              pricing={parking.pricing.localCurrency.ordinary}
            />
          ) : null}
        </div>
        <div className={styles.priceWrapper}>
          <Typography variant="Title/Overline/sm">
            <h6 className={styles.priceHeading}>
              {intl.formatMessage({
                id: 'parkingInformation.weekendPrices',
                defaultMessage: 'Weekend prices',
              })}
            </h6>
          </Typography>
          <Divider />
          {parking.pricing.localCurrency ? (
            <ParkingPrices
              currency={parking.pricing.localCurrency.currency}
              freeParking={parking.pricing.freeParking}
              pricing={parking.pricing.localCurrency.weekend}
            />
          ) : null}
        </div>
      </div>
      {parking.externalParkingUrl && showExternalParkingButton && (
        <ButtonLink
          typography="Body/Paragraph/mdBold"
          href={parking.externalParkingUrl}
          target="_blank"
        >
          {intl.formatMessage({
            id: 'parkingInformation.bookParking',
            defaultMessage: 'Book parking',
          })}
          <MaterialIcon icon="open_in_new" color="CurrentColor" />
        </ButtonLink>
      )}
    </div>
  )
}