"use client"

import { trpc } from "@/lib/trpc/client"

import useLang from "@/hooks/useLang"
import RatesProvider from "@/providers/RatesProvider"

import RateSummary from "./RateSummary"
import Rooms from "./Rooms"
import { RoomsContainerSkeleton } from "./RoomsContainerSkeleton"

import type { RoomsContainerProps } from "@/types/components/hotelReservation/selectRate/roomsContainer"

export function RoomsContainer({
  booking,
  hotelType,
  roomCategories,
  vat,
}: RoomsContainerProps) {
  const lang = useLang()

  const roomsAvailability = trpc.hotel.availability.selectRate.rooms.useQuery({
    booking,
    lang,
  })

  if (
    (roomsAvailability.isFetching || !roomsAvailability.data) &&
    !roomsAvailability.isFetched
  ) {
    return <RoomsContainerSkeleton />
  }

  return (
    <RatesProvider
      booking={booking}
      hotelType={hotelType}
      roomCategories={roomCategories}
      roomsAvailability={roomsAvailability.data}
      vat={vat}
    >
      <Rooms />
      <RateSummary />
    </RatesProvider>
  )
}