'use client';

import Loading from '@/_components/Loading';
import { useBooking } from '@/_hooks/useBooking';
import BookingDetails from './_components/BookingDetails';
import BookingProcess from './_components/BookingProcess';

export default function BookingsWrapper({ examSlug }: { examSlug: string }) {
  const { booking, stripePayment, loading } = useBooking();

  if (loading) return <Loading />;

  return (
    <section className="my-10">
      <div className="flex flex-col gap-4">
        {booking ? (
          <BookingDetails booking={booking} stripePayment={stripePayment} />
        ) : (
          <BookingProcess examSlug={examSlug} />
        )}
      </div>
    </section>
  );
}