"use client"

import RoomCard from "./RoomCard"

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

import type { RoomListProps } from "@/types/components/hotelReservation/selectRate/roomSelection"

export default function RoomList({
  roomsAvailability,
  roomCategories,
  availablePackages,
  selectedPackages,
  setRateCode,
  hotelType,
  roomListIndex,
}: RoomListProps) {
  const { roomConfigurations, rateDefinitions } = roomsAvailability

  return (
    <div className={styles.wrapper}>
      <ul className={styles.roomList}>
        {roomConfigurations.map((roomConfiguration) => (
          <RoomCard
            hotelId={roomsAvailability.hotelId.toString()}
            hotelType={hotelType}
            rateDefinitions={rateDefinitions}
            roomConfiguration={roomConfiguration}
            roomCategories={roomCategories}
            handleSelectRate={setRateCode}
            selectedPackages={selectedPackages}
            packages={availablePackages}
            key={roomConfiguration.roomTypeCode}
            roomListIndex={roomListIndex}
          />
        ))}
      </ul>
    </div>
  )
}