"use client"

import { useIntl } from "react-intl"

import ButtonLink from "@/components/ButtonLink"
import AdditionalAmenities from "@/components/SidePeeks/AmenitiesSidepeekContent/AdditionalAmenities"
import Accordion from "@/components/TempDesignSystem/Accordion"
import SidePeek from "@/components/TempDesignSystem/SidePeek"

import AccessibilityAccordionItem from "../AmenitiesSidepeekContent/Accordions/Accessibility"
import BreakfastAccordionItem from "../AmenitiesSidepeekContent/Accordions/Breakfast"
import CheckInCheckOutAccordionItem from "../AmenitiesSidepeekContent/Accordions/CheckInCheckOut"
import ParkingAccordionItem from "../AmenitiesSidepeekContent/Accordions/Parking"

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

import type { AmenitiesSidePeekProps } from "@/types/components/hotelReservation/amenitiesSidePeek"
import { SidePeekEnum } from "@/types/components/hotelReservation/sidePeek"

export default function AmenitiesSidePeek({
  hotel,
  restaurants,
  additionalHotelData,
  activeSidePeek,
  close,
}: AmenitiesSidePeekProps) {
  const intl = useIntl()

  return (
    <SidePeek
      title={intl.formatMessage({ defaultMessage: "Amenities" })}
      isOpen={activeSidePeek === SidePeekEnum.amenities}
      handleClose={close}
    >
      <Accordion>
        <ParkingAccordionItem
          parking={hotel.parking}
          elevatorPitch={additionalHotelData?.hotelParking.elevatorPitch}
        />
        <BreakfastAccordionItem
          restaurants={restaurants}
          hotelType={hotel.hotelType}
        />
        <CheckInCheckOutAccordionItem checkInData={hotel.hotelFacts.checkin} />
        <AccessibilityAccordionItem
          elevatorPitch={additionalHotelData?.hotelSpecialNeeds.elevatorPitch}
        />
        <AdditionalAmenities amenities={hotel.detailedFacilities} />
      </Accordion>
      {hotel.url ? (
        <ButtonLink
          href={hotel.url}
          variant="Secondary"
          size="Medium"
          typography="Body/Paragraph/mdBold"
          className={styles.button}
        >
          {intl.formatMessage({
            defaultMessage: "Read more about the hotel",
          })}
        </ButtonLink>
      ) : null}
    </SidePeek>
  )
}