web/apps/scandic-web/components/HotelReservation/BookingConfirmation/Rooms/index.tsx

import { Suspense } from "react"

import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import { getIntl } from "@/i18n"

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 async function Rooms({
  booking,
  mainRoom,
  linkedReservations,
}: BookingConfirmationRoomsProps) {
  const intl = await getIntl()
  return (
    <section className={styles.rooms}>
      <div className={styles.room}>
        {(linkedReservations?.length ?? 0 > 0) ? (
          <Subtitle color="mainGrey60" type="two">
            {intl.formatMessage({ id: "Room {roomIndex}" }, { roomIndex: 1 })}
          </Subtitle>
        ) : null}
        <Room
          booking={booking}
          img={mainRoom.images[0]}
          roomName={mainRoom.name}
        />
      </div>

      {linkedReservations?.map((reservation, idx) => (
        <div key={idx} className={styles.room}>
          <Subtitle color="mainGrey60" type="two">
            {intl.formatMessage(
              { id: "Room {roomIndex}" },
              { roomIndex: idx + 2 }
            )}
          </Subtitle>
          <Suspense
            key={reservation.confirmationNumber}
            fallback={<LinkedReservationCardSkeleton />}
          >
            <LinkedReservation
              confirmationNumber={reservation.confirmationNumber}
            />
          </Suspense>
        </div>
      ))}
    </section>
  )
}