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

import HotelCard from "@/components/HotelReservation/HotelCard"
import BedSelection from "@/components/HotelReservation/SelectRate/BedSelection"
import BreakfastSelection from "@/components/HotelReservation/SelectRate/BreakfastSelection"
import FlexibilitySelection from "@/components/HotelReservation/SelectRate/FlexibilitySelection"
import RoomSelection from "@/components/HotelReservation/SelectRate/RoomSelection"
import { setLang } from "@/i18n/serverContext"

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

import { LangParams, PageArgs } from "@/types/params"

export default async function SelectRate({ params }: PageArgs<LangParams>) {
  setLang(params.lang)

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

  const rooms = await serverClient().hotel.rates.get({
    // TODO: pass the correct hotel ID and all other parameters that should be included in the search
    hotelId: "1",
  })

  return (
    <div className={styles.page}>
      <main className={styles.content}>
        <div className={styles.hotelInfo}>
          <HotelCard hotel={hotel} />
        </div>
        <RoomSelection rooms={rooms} />
        <FlexibilitySelection />
        <BreakfastSelection />
        <BedSelection />
      </main>
    </div>
  )
}