"use client"

import { useSelectRateContext } from "@/contexts/SelectRate/SelectRateContext"

import { MultiRoomWrapper } from "./MultiRoomWrapper"
import NoAvailabilityAlert from "./NoAvailabilityAlert"
import { RoomsHeader } from "./RoomsHeader"
import RoomsList from "./RoomsList"

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

export default function Rooms() {
  const {
    availability,
    input: { isMultiRoom },
  } = useSelectRateContext()

  if (!availability) {
    return null
  }

  return (
    <div className={styles.content}>
      {availability.data?.map((_room, idx) => {
        return (
          <MultiRoomWrapper
            key={`${idx}`}
            roomIndex={idx}
            isMultiRoom={isMultiRoom}
          >
            <RoomsHeader roomIndex={idx} />
            <NoAvailabilityAlert roomIndex={idx} />
            <RoomsList roomIndex={idx} />
          </MultiRoomWrapper>
        )
      })}
    </div>
  )
}