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

import RoomCard from "./RoomCard"

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

import { RoomSelectionProps } from "@/types/components/hotelReservation/selectRate/roomSelection"

export default async function RoomSelection({ rooms }: RoomSelectionProps) {
  const { formatMessage } = await getIntl()

  return (
    <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>
    </div>
  )
}