"use client"

import { useRef } from "react"

import { Header } from "../Header"

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

import type { BookingConfirmation } from "@scandic-hotels/trpc/types/bookingConfirmation"

import type { BookingConfirmationRoom } from "../../../types/components/bookingConfirmation/bookingConfirmation"

interface ConfirmationProps extends Pick<
  BookingConfirmation,
  "booking" | "hotel" | "url"
> {
  room: BookingConfirmationRoom
}

export function Confirmation({
  booking,
  url,
  hotel,
  children,
}: React.PropsWithChildren<ConfirmationProps>) {
  const mainRef = useRef<HTMLElement | null>(null)

  return (
    <main className={styles.main} ref={mainRef}>
      <Header url={url} booking={booking} hotel={hotel} mainRef={mainRef} />
      {children}
    </main>
  )
}