"use client"
import { useRoomContext } from "@/contexts/SelectRate/Room"

import RoomListItem from "./RoomListItem"
import { RoomsListSkeleton } from "./RoomsListSkeleton"
import ScrollToList from "./ScrollToList"

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

export default function RoomsList() {
  const { isFetchingPackages, rooms } = useRoomContext()
  if (isFetchingPackages) {
    return <RoomsListSkeleton />
  }
  return (
    <>
      <ScrollToList />
      <ul className={styles.roomList}>
        {rooms.map((roomConfiguration) => (
          <RoomListItem
            key={roomConfiguration.roomTypeCode}
            roomConfiguration={roomConfiguration}
          />
        ))}
      </ul>
    </>
  )
}
