import { serverClient } from "@/lib/trpc/server"
import tempHotelData from "@/server/routers/hotels/tempHotelData.json"

import RoomSelection from "@/components/HotelReservation/SelectRate/RoomSelection"
import { setLang } from "@/i18n/serverContext"

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

import { SelectRateSearchParams } from "@/types/components/hotelReservation/selectRate/selectRate"
import { LangParams, PageArgs } from "@/types/params"

export default async function SelectRatePage({
  params,
  searchParams,
}: PageArgs<LangParams & { section: string }, SelectRateSearchParams>) {
  setLang(params.lang)

  // TODO: Use real endpoint.
  const hotel = tempHotelData.data.attributes

  const roomConfigurations = await serverClient().hotel.availability.rooms({
    hotelId: parseInt(searchParams.hotel, 10),
    roomStayStartDate: "2024-11-02",
    roomStayEndDate: "2024-11-03",
    adults: 1,
  })
  if (!roomConfigurations) {
    return "No rooms found"
  }

  return (
    <div>
      {/* TODO: Add Hotel Listing Card */}
      <div>Hotel Listing Card TBI</div>

      <div className={styles.content}>
        <div className={styles.main}>
          <RoomSelection roomConfigurations={roomConfigurations} />
        </div>
      </div>
    </div>
  )
}