import { notFound } from "next/navigation"

import { serverClient } from "@/lib/trpc/server"

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

import ReceiptRooms from "./Rooms"

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

import type { BookingConfirmationReceiptProps } from "@/types/components/hotelReservation/bookingConfirmation/receipt"

export default async function Receipt({
  booking,
  room,
}: BookingConfirmationReceiptProps) {
  if (!room) {
    return notFound()
  }

  const intl = await getIntl()

  const linkedReservations = await Promise.all(
    //  TODO: How to handle partial failure (e.g. one booking can't be fetched)? Need UX/UI
    booking.linkedReservations.map(async (res) => {
      const confirmation = await serverClient().booking.confirmation({
        confirmationNumber: res.confirmationNumber,
      })
      return confirmation
    })
  )

  return (
    <section className={styles.receipt}>
      <Subtitle type="two">
        {intl.formatMessage({ id: "Booking summary" })}
      </Subtitle>
      <ReceiptRooms
        booking={booking}
        room={room}
        linkedReservations={linkedReservations}
      />
    </section>
  )
}