"use client"

import { useIntl } from "react-intl"

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

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

import type { ParkingListProps } from "@/types/components/hotelPage/sidepeek/parking"

export default function ParkingList({
  numberOfChargingSpaces,
  canMakeReservation,
  numberOfParkingSpots,
  distanceToHotel,
  address,
}: ParkingListProps) {
  const intl = useIntl()

  const canMakeReservationYesMsg = intl.formatMessage({
    defaultMessage: "Parking can be reserved in advance: Yes",
  })
  const canMakeReservationNoMsg = intl.formatMessage({
    defaultMessage: "Parking can be reserved in advance: No",
  })

  return (
    <Typography variant="Body/Paragraph/mdRegular">
      <ul className={styles.listStyling}>
        {numberOfChargingSpaces ? (
          <li>
            {intl.formatMessage(
              {
                defaultMessage:
                  "Number of charging points for electric cars: {number}",
              },
              { number: numberOfChargingSpaces }
            )}
          </li>
        ) : null}
        <li>
          {canMakeReservation
            ? canMakeReservationYesMsg
            : canMakeReservationNoMsg}
        </li>
        {numberOfParkingSpots ? (
          <li>
            {intl.formatMessage(
              {
                defaultMessage: "Number of parking spots: {number}",
              },
              { number: numberOfParkingSpots }
            )}
          </li>
        ) : null}
        {distanceToHotel ? (
          <li>
            {intl.formatMessage(
              {
                defaultMessage: "Distance to hotel: {distanceInM} m",
              },
              { distanceInM: distanceToHotel }
            )}
          </li>
        ) : null}
        {address ? (
          <li>
            {intl.formatMessage(
              {
                defaultMessage: "Address: {address}",
              },
              { address }
            )}
          </li>
        ) : null}
      </ul>
    </Typography>
  )
}