import Body from "@/components/TempDesignSystem/Text/Body"
import { getIntl } from "@/i18n"
import { formatPrice } from "@/utils/numberFormatting"

import { getPeriod } from "./utils"

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

import {
  type ParkingPricesProps,
  Periods,
} from "@/types/components/hotelPage/sidepeek/parking"

export default async function ParkingPrices({
  currency = "",
  freeParking,
  pricing,
}: ParkingPricesProps) {
  const intl = await getIntl()

  return freeParking ? (
    <Body textTransform="bold" color="uiTextHighContrast">
      {intl.formatMessage({ id: "Free parking" })}
    </Body>
  ) : (
    <dl className={styles.wrapper}>
      {pricing?.map((parking) => (
        <div key={parking.period} className={styles.period}>
          <div className={styles.information}>
            <Body textTransform="bold" color="uiTextHighContrast" asChild>
              <dt>{getPeriod(intl, parking.period)}</dt>
            </Body>
            <Body color="uiTextHighContrast" asChild>
              <dd>
                {parking.amount
                  ? formatPrice(intl, parking.amount, currency)
                  : intl.formatMessage({ id: "At a cost" })}
              </dd>
            </Body>
          </div>
          {parking.startTime &&
            parking.endTime &&
            parking.period !== Periods.allDay && (
              <div className={styles.information}>
                <Body color="uiTextHighContrast" asChild>
                  <dt>{intl.formatMessage({ id: "From" })}</dt>
                </Body>
                <Body color="uiTextHighContrast" asChild>
                  <dd>{`${parking.startTime}-${parking.endTime}`}</dd>
                </Body>
              </div>
            )}
        </div>
      ))}
    </dl>
  )
}
