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

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

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

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

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

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