import { useIntl } from "react-intl"

import FilledHeartIcon from "@/components/Icons/FilledHeart"
import AccordionItem from "@/components/TempDesignSystem/Accordion/AccordionItem"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"

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

import type { ParkingProps } from "@/types/components/hotelReservation/selectHotel/selectHotel"
import { IconName } from "@/types/components/icon"

export default function Parking({ parking }: ParkingProps) {
  const intl = useIntl()
  return (
    <AccordionItem
      title={intl.formatMessage({ id: "Parking" })}
      icon={IconName.Parking}
      className={styles.parking}
      variant="sidepeek"
    >
      {parking.map((p) => (
        <div key={p.name}>
          <Subtitle type="two">
            {`${intl.formatMessage({ id: p.type })} ${p?.name ? ` (${p.name})` : ""}`}
          </Subtitle>
          <ul className={styles.list}>
            {p?.address && (
              <li>
                <FilledHeartIcon color="baseIconLowContrast" />
                {`${intl.formatMessage({ id: "Address" })}: ${p.address}`}
              </li>
            )}
            {p?.numberOfParkingSpots !== undefined && (
              <li>
                <FilledHeartIcon color="baseIconLowContrast" />
                {intl.formatMessage(
                  { id: "Number of parking spots" },
                  { number: p.numberOfParkingSpots }
                )}
              </li>
            )}
            {p?.numberOfChargingSpaces !== undefined && (
              <li>
                <FilledHeartIcon color="baseIconLowContrast" />
                {intl.formatMessage(
                  { id: "Number of charging points for electric cars" },
                  { number: p.numberOfChargingSpaces }
                )}
              </li>
            )}
          </ul>
        </div>
      ))}
    </AccordionItem>
  )
}