import { serverClient } from "@/lib/trpc/server"

import RoomCard from "@/components/HotelReservation/SelectRate/RoomCard"
import Header from "@/components/Section/Header"
import { getIntl } from "@/i18n"

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

export default async function SelectRate() {
  const { formatMessage } = await getIntl()
  const rooms = await serverClient().hotel.getRates({
    // 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}>Hotel info TBI</div>
        <div className={styles.header}>
          <Header
            title={formatMessage({ id: "Choose room" })}
            subtitle={formatMessage({
              id: "Which room class suits you the best?",
            })}
            link={{
              href: "#",
              text: formatMessage({
                id: "All rooms comes with standard amenities",
              }),
            }}
          />
        </div>

        <ul className={styles.roomList}>
          {rooms.map((room) => (
            <li key={room.id}>
              <input
                type="radio"
                name="room"
                value={room.id}
                id={`room-${room.id}`}
              />
              <RoomCard room={room} />
            </li>
          ))}
        </ul>
      </main>
    </div>
  )
}