"use client"
import { useRef, useState } from "react"

import Grids from "@/components/TempDesignSystem/Grids"
import MeetingRoomCard from "@/components/TempDesignSystem/MeetingRoomCard"
import ShowMoreButton from "@/components/TempDesignSystem/ShowMoreButton"

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

import type { MeetingRooms } from "@/types/components/hotelPage/meetingRooms"

interface MeetingRoomsProps {
  rooms: MeetingRooms
}

export default function MeetingRooms({ rooms }: MeetingRoomsProps) {
  const showToggleButton = rooms.length > 3
  const [allRoomsVisible, setAllRoomsVisible] = useState(!showToggleButton)

  const scrollRef = useRef<HTMLDivElement>(null)

  function handleShowMore() {
    if (scrollRef.current && allRoomsVisible) {
      scrollRef.current.scrollIntoView({ behavior: "smooth" })
    }
    setAllRoomsVisible((state) => !state)
  }

  return (
    <div className={styles.section} ref={scrollRef}>
      <Grids.Stackable
        className={`${styles.grid} ${allRoomsVisible ? styles.allVisible : ""}`}
      >
        {rooms.map((room) => (
          <MeetingRoomCard key={room.id} room={room.attributes} />
        ))}
      </Grids.Stackable>
      {showToggleButton ? (
        <ShowMoreButton
          loadMoreData={handleShowMore}
          showLess={allRoomsVisible}
        />
      ) : null}
    </div>
  )
}
