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) => {
        const title = `${p.type}${p.name ? ` (${p.name})` : ""}`

        return (
          <div key={p.name}>
            <Subtitle type="two">{title}</Subtitle>
            <ul className={styles.list}>
              {p.address !== undefined && (
                <li>
                  <FilledHeartIcon color="baseIconLowContrast" />$
                  {intl.formatMessage(
                    { id: "Address: {address}" },
                    {
                      address: p.address,
                    }
                  )}
                </li>
              )}
              {p.numberOfParkingSpots !== undefined && (
                <li>
                  <FilledHeartIcon color="baseIconLowContrast" />
                  {intl.formatMessage(
                    { id: "Number of parking spots: {number}" },
                    { number: p.numberOfParkingSpots }
                  )}
                </li>
              )}
              {p.numberOfChargingSpaces !== undefined && (
                <li>
                  <FilledHeartIcon color="baseIconLowContrast" />
                  {intl.formatMessage(
                    {
                      id: "Number of charging points for electric cars: {number}",
                    },
                    { number: p.numberOfChargingSpaces }
                  )}
                </li>
              )}
            </ul>
          </div>
        )
      })}
    </AccordionItem>
  )
}