import { Suspense } from "react"

import { LinkedReservationCardSkeleton } from "./LinkedReservation/LinkedReservationCardSkeleton"
import { LinkedReservation } from "./LinkedReservation"
import Room from "./Room"

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

import type { BookingConfirmationRoomsProps } from "@/types/components/hotelReservation/bookingConfirmation/rooms"

export default function Rooms({
  booking,
  mainRoom,
  linkedReservations,
}: BookingConfirmationRoomsProps) {
  return (
    <section className={styles.rooms}>
      <Room
        booking={booking}
        img={mainRoom.images[0]}
        roomName={mainRoom.name}
      />

      {linkedReservations?.map((reservation) => (
        <Suspense
          key={reservation.confirmationNumber}
          fallback={<LinkedReservationCardSkeleton />}
        >
          <LinkedReservation
            confirmationNumber={reservation.confirmationNumber}
          />
        </Suspense>
      ))}
    </section>
  )
}