"use client"

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

import Details from "./Details"
import { listItemVariants } from "./listItemVariants"
import Rates from "./Rates"
import RoomImage from "./RoomImage"
import RoomNotAvailable from "./RoomNotAvailable"

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

import { AvailabilityEnum } from "@/types/components/hotelReservation/selectHotel/selectHotel"
import type { RoomListItemProps } from "@/types/components/hotelReservation/selectRate/roomListItem"

export default function RoomListItem({ roomConfiguration }: RoomListItemProps) {
  const { roomPackages } = useRoomContext()
  const classNames = listItemVariants({
    availability:
      roomConfiguration.status === AvailabilityEnum.NotAvailable
        ? "noAvailability"
        : "default",
  })

  return (
    <li className={classNames}>
      <RoomImage
        roomPackages={roomPackages}
        roomType={roomConfiguration.roomType}
        roomTypeCode={roomConfiguration.roomTypeCode}
        roomsLeft={roomConfiguration.roomsLeft}
      />
      <Details roomTypeCode={roomConfiguration.roomTypeCode} />

      <div className={styles.container}>
        {roomConfiguration.status === AvailabilityEnum.NotAvailable ? (
          <RoomNotAvailable />
        ) : (
          <Rates roomConfiguration={roomConfiguration} />
        )}
      </div>
    </li>
  )
}
