web/components/ParkingInformation/index.tsx

import Link from "next/link"

import { getIntl } from "@/i18n"

import { OpenInNewIcon } from "../Icons"
import Button from "../TempDesignSystem/Button"
import Divider from "../TempDesignSystem/Divider"
import Caption from "../TempDesignSystem/Text/Caption"
import Subtitle from "../TempDesignSystem/Text/Subtitle"
import ParkingList from "./ParkingList"
import ParkingPrices from "./ParkingPrices"

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

import type { Parking } from "@/types/hotel"

interface ParkingInformationProps {
  parking: Parking
  showExternalParkingButton?: boolean
}

export default async function ParkingInformation({
  parking,
  showExternalParkingButton = true,
}: ParkingInformationProps) {
  const intl = await getIntl()
  return (
    <div className={styles.parkingInformation}>
      <div className={styles.list}>
        <Subtitle type="two" asChild>
          <h4>{parking.type}</h4>
        </Subtitle>
        <ParkingList
          numberOfChargingSpaces={parking.numberOfChargingSpaces}
          canMakeReservation={parking.canMakeReservation}
          numberOfParkingSpots={parking.numberOfParkingSpots}
          distanceToHotel={parking.distanceToHotel}
          address={parking.address}
        />
      </div>
      <div className={styles.prices}>
        <Subtitle type="two" asChild>
          <h5>{intl.formatMessage({ id: "Prices" })}</h5>
        </Subtitle>
        <div className={styles.priceWrapper}>
          <Caption color="uiTextMediumContrast" textTransform="uppercase">
            {intl.formatMessage({ id: "Weekday prices" })}
          </Caption>
          <Divider color="baseSurfaceSubtleHover" />
          <ParkingPrices
            pricing={parking.pricing.localCurrency?.ordinary}
            currency={parking.pricing.localCurrency?.currency}
            freeParking={parking.pricing.freeParking}
          />
        </div>
        <div className={styles.priceWrapper}>
          <Caption color="uiTextMediumContrast" textTransform="uppercase">
            {intl.formatMessage({ id: "Weekend prices" })}
          </Caption>
          <Divider color="baseSurfaceSubtleHover" />
          <ParkingPrices
            pricing={parking.pricing.localCurrency?.weekend}
            currency={parking.pricing.localCurrency?.currency}
            freeParking={parking.pricing.freeParking}
          />
        </div>
      </div>
      {parking.externalParkingUrl && showExternalParkingButton && (
        <Button theme="base" intent="primary" variant="icon" asChild>
          <Link href={parking.externalParkingUrl} target="_blank">
            {intl.formatMessage({ id: "Book parking" })}
            <OpenInNewIcon />
          </Link>
        </Button>
      )}
    </div>
  )
}