"use client"

import { useIntl } from "react-intl"

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

import ButtonLink from "@/components/ButtonLink"
import { IconName } from "@/components/Icons/iconName"
import ParkingInformation from "@/components/ParkingInformation"
import AccordionItem from "@/components/TempDesignSystem/Accordion/AccordionItem"

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

import type { ParkingAccordionItemProps } from "@/types/components/sidePeeks/amenities"

export default function ParkingAccordionItem({
  parking,
  elevatorPitch,
  parkingPageHref,
}: ParkingAccordionItemProps) {
  const intl = useIntl()

  return (
    <AccordionItem
      title={intl.formatMessage({
        defaultMessage: "Parking",
      })}
      iconName={IconName.Parking}
      variant="sidepeek"
      className={styles.accordionItem}
      trackingId="amenities:parking"
    >
      <div className={styles.parkingContent}>
        {elevatorPitch ? (
          <Typography variant="Body/Paragraph/mdRegular">
            <p>{elevatorPitch}</p>
          </Typography>
        ) : null}
        {parking.map((data) => (
          <ParkingInformation key={data.type} parking={data} />
        ))}
        {parkingPageHref ? (
          <ButtonLink
            href={parkingPageHref}
            variant="Secondary"
            color="Primary"
            size="Medium"
            typography="Body/Paragraph/mdBold"
          >
            {intl.formatMessage({
              defaultMessage: "About parking",
            })}
          </ButtonLink>
        ) : null}
      </div>
    </AccordionItem>
  )
}
