import { Typography } from "@scandic-hotels/design-system/Typography"

import { getIntl } from "@/i18n"

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

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

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

async function RoomTitle({ nr }: { nr: number }) {
  const intl = await getIntl()

  return (
    <Typography variant="Title/Subtitle/md">
      <h2 className={styles.roomTitle}>
        {intl.formatMessage(
          {
            defaultMessage: "Room {roomIndex}",
          },
          { roomIndex: nr }
        )}
      </h2>
    </Typography>
  )
}

export default async function Rooms({
  booking,
  checkInTime,
  checkOutTime,
  mainRoom,
}: BookingConfirmationRoomsProps) {
  const { linkedReservations } = booking

  return (
    <section className={styles.rooms}>
      <div className={styles.room}>
        {linkedReservations.length ? <RoomTitle nr={1} /> : null}
        <Room
          checkInDate={booking.checkInDate}
          checkOutDate={booking.checkOutDate}
          checkInTime={checkInTime}
          checkOutTime={checkOutTime}
          confirmationNumber={booking.confirmationNumber}
          guaranteeInfo={booking.guaranteeInfo}
          guest={booking.guest}
          img={mainRoom.images[0]}
          rateDefinition={booking.rateDefinition}
          roomName={mainRoom.name}
        />
      </div>

      {linkedReservations.map((reservation, idx) => (
        <div className={styles.room} key={reservation.confirmationNumber}>
          <RoomTitle nr={idx + 2} />
          <LinkedReservation
            checkInTime={checkInTime}
            checkOutTime={checkOutTime}
            refId={reservation.refId}
            roomIndex={idx + 1}
          />
        </div>
      ))}
    </section>
  )
}