"use client"
import { 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 { ConfirmationProps } from "@/types/components/hotelReservation/bookingConfirmation/bookingConfirmation"

export default function Confirmation({
  booking,
  hotel,
  room,
}: ConfirmationProps) {
  const mainRef = useRef<HTMLElement | null>(null)
  return (
    <main className={styles.main} ref={mainRef}>
      <Header booking={booking} hotel={hotel} mainRef={mainRef} />
      <div className={styles.booking}>
        <Rooms booking={booking} room={room} />
        <PaymentDetails booking={booking} />
        <Divider color="primaryLightSubtle" />
        <HotelDetails hotel={hotel} />
        <Promos
          confirmationNumber={booking.confirmationNumber}
          hotelId={hotel.operaId}
          lastName={booking.guest.lastName}
        />
        <div className={styles.mobileReceipt}>
          <Receipt booking={booking} hotel={hotel} room={room} />
        </div>
      </div>
      <aside className={styles.aside}>
        <SidePanel variant="receipt">
          <Receipt booking={booking} hotel={hotel} room={room} />
        </SidePanel>
      </aside>
    </main>
  )
}