"use client"

import { useIntl } from "react-intl"

import { useEnterDetailsStore } from "@/stores/enter-details"

import Contact from "@/components/HotelReservation/Contact"
import Divider from "@/components/TempDesignSystem/Divider"
import SidePeek from "@/components/TempDesignSystem/SidePeek"
import Body from "@/components/TempDesignSystem/Text/Body"

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

import {
  SidePeekEnum,
  SidePeekProps,
} from "@/types/components/enterDetails/sidePeek"

export default function EnterDetailsSidePeek({ hotel }: SidePeekProps) {
  const activeSidePeek = useEnterDetailsStore((state) => state.activeSidePeek)
  const close = useEnterDetailsStore((state) => state.closeSidePeek)

  const intl = useIntl()
  return (
    <SidePeek
      contentKey={SidePeekEnum.hotelDetails}
      title={intl.formatMessage({ id: "About the hotel" })}
      isOpen={activeSidePeek === SidePeekEnum.hotelDetails}
      handleClose={close}
    >
      <article className={styles.spacing}>
        <Contact hotel={hotel} />
        <Divider />
        <section className={styles.spacing}>
          <Body>{hotel.hotelContent.texts.descriptions.medium}</Body>
          {hotel.hotelContent.texts.facilityInformation
            .split(/[\n\r]/g)
            .filter((p) => p)
            .map((paragraph, idx) => (
              <Body key={`facilityInfo-${idx}`}>{paragraph}</Body>
            ))}
        </section>
      </article>
    </SidePeek>
  )
}
