"use client"

import { useIntl } from "react-intl"

import { Typography } from "@scandic-hotels/design-system/Typography"

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 function ParkingPrices({
  currency = "",
  freeParking,
  pricing,
}: ParkingPricesProps) {
  const intl = useIntl()

  return freeParking ? (
    <Typography variant="Body/Paragraph/mdBold">
      <p className={styles.wrapper}>
        {intl.formatMessage({ defaultMessage: "Free parking" })}
      </p>
    </Typography>
  ) : (
    <dl className={styles.wrapper}>
      {pricing?.map((parking) => (
        <div key={parking.period} className={styles.period}>
          <div className={styles.information}>
            <Typography variant="Body/Paragraph/mdBold">
              <dt>{getPeriod(intl, parking.period)}</dt>
            </Typography>
            <Typography variant="Body/Paragraph/mdRegular">
              <dd>
                {parking.amount
                  ? formatPrice(intl, parking.amount, currency)
                  : intl.formatMessage({
                      defaultMessage: "At a cost",
                    })}
              </dd>
            </Typography>
          </div>
          {parking.startTime &&
            parking.endTime &&
            parking.period !== Periods.allDay && (
              <Typography variant="Body/Paragraph/mdRegular">
                <div className={styles.information}>
                  <dt>{intl.formatMessage({ defaultMessage: "From" })}</dt>
                  {/* eslint-disable formatjs/no-literal-string-in-jsx */}
                  <dd>{`${parking.startTime}-${parking.endTime}`}</dd>
                </div>
              </Typography>
            )}
        </div>
      ))}
    </dl>
  )
}