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

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

const getRooms: () => Promise<Room[]> = () => {
  return new Promise((resolve) =>
    resolve([
      {
        id: 1,
        name: "Cabin",
        description:
          "Stylish, peaceful and air-conditioned room. The rooms have small clerestory windows.",
        size: "17 - 24 m² (1 - 2 persons)",
        pricePerNight: 1348,
        currency: "SEK",
        imageSrc:
          "https://www.scandichotels.se/imageVault/publishedmedia/xnmqnmz6mz0uhuat0917/scandic-helsinki-hub-room-standard-KR-7.jpg",
      },
      {
        id: 2,
        name: "Standard",
        description:
          "Stylish, peaceful and air-conditioned room. The rooms have small clerestory windows.",
        size: "19 - 30 m² (1 - 2 persons)",
        pricePerNight: 1548,
        currency: "SEK",
        imageSrc:
          "https://www.scandichotels.se/imageVault/publishedmedia/xnmqnmz6mz0uhuat0917/scandic-helsinki-hub-room-standard-KR-7.jpg",
      },
      {
        id: 3,
        name: "Superior",
        description:
          "Stylish, peaceful and air-conditioned room. The rooms have small clerestory windows.",
        size: "22 - 40 m² (1 - 3 persons)",
        pricePerNight: 1744,
        currency: "SEK",
        imageSrc:
          "https://www.scandichotels.se/imageVault/publishedmedia/xnmqnmz6mz0uhuat0917/scandic-helsinki-hub-room-standard-KR-7.jpg",
      },
      {
        id: 4,
        name: "Superior Family",
        description:
          "Stylish, peaceful and air-conditioned room. The rooms have small clerestory windows.",
        size: "29 - 49 m² (3 - 4 persons)",
        pricePerNight: 2032,
        currency: "SEK",
        imageSrc:
          "https://www.scandichotels.se/imageVault/publishedmedia/xnmqnmz6mz0uhuat0917/scandic-helsinki-hub-room-standard-KR-7.jpg",
      },
      {
        id: 5,
        name: "Superior PLUS",
        description:
          "Stylish, peaceful and air-conditioned room. The rooms have small clerestory windows.",
        size: "21 - 28 m² (2 - 3 persons)",
        pricePerNight: 2065,
        currency: "SEK",
        imageSrc:
          "https://www.scandichotels.se/imageVault/publishedmedia/xnmqnmz6mz0uhuat0917/scandic-helsinki-hub-room-standard-KR-7.jpg",
      },
      {
        id: 6,
        name: "Junior Suite",
        description:
          "Stylish, peaceful and air-conditioned room. The rooms have small clerestory windows.",
        size: "35 - 43 m² (2 - 4 persons)",
        pricePerNight: 3012,
        currency: "SEK",
        imageSrc:
          "https://www.scandichotels.se/imageVault/publishedmedia/xnmqnmz6mz0uhuat0917/scandic-helsinki-hub-room-standard-KR-7.jpg",
      },
    ])
  )
}

export default async function SelectRate() {
  const { formatMessage } = await getIntl()
  const rooms = await getRooms()

  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>
  )
}