"use client"
import { use, useRef } from "react"

import Header from "@/components/HotelReservation/BookingConfirmation/Header"
import HotelDetails from "@/components/HotelReservation/BookingConfirmation/HotelDetails"
import PaymentDetails from "@/components/HotelReservation/BookingConfirmation/PaymentDetails"
import Promos from "@/components/HotelReservation/BookingConfirmation/Promos"
import Receipt from "@/components/HotelReservation/BookingConfirmation/Receipt"
import Rooms from "@/components/HotelReservation/BookingConfirmation/Rooms"
import SidePanel from "@/components/HotelReservation/SidePanel"
import Divider from "@/components/TempDesignSystem/Divider"

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

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

export default function BookingConfirmation({
  bookingConfirmationPromise,
}: BookingConfirmationProps) {
  const bookingConfirmation = use(bookingConfirmationPromise)
  const mainRef = useRef<HTMLElement | null>(null)
  return (
    <main className={styles.main} ref={mainRef}>
      <Header
        booking={bookingConfirmation.booking}
        hotel={bookingConfirmation.hotel}
        mainRef={mainRef}
      />
      <div className={styles.booking}>
        <Rooms
          booking={bookingConfirmation.booking}
          room={bookingConfirmation.room}
        />
        <PaymentDetails booking={bookingConfirmation.booking} />
        <Divider color="primaryLightSubtle" />
        <HotelDetails hotel={bookingConfirmation.hotel} />
        <Promos />
        <div className={styles.mobileReceipt}>
          <Receipt
            booking={bookingConfirmation.booking}
            hotel={bookingConfirmation.hotel}
            room={bookingConfirmation.room}
          />
        </div>
      </div>
      <aside className={styles.aside}>
        <SidePanel variant="receipt">
          <Receipt
            booking={bookingConfirmation.booking}
            hotel={bookingConfirmation.hotel}
            room={bookingConfirmation.room}
          />
        </SidePanel>
      </aside>
    </main>
  )
}