import { useIsMobile } from '@/hooks/use-mobile';
import type { ComplexWithRole } from '@repo/api-contract';
import { BookingProvider } from './booking-provider';
import { BookingCreateDialog } from './components/booking-create-dialog';
import { BookingDaySummary, BookingQuickActions } from './components/booking-day-summary';
import { BookingHeader } from './components/booking-header';
import { BookingMobile } from './components/booking-mobile';
import { BookingTimeline } from './components/booking-timeline';
import { BookingToolbar } from './components/booking-toolbar';
import { BookingToolsDialog } from './components/booking-tools-dialog';

interface BookingProps {
  complex: ComplexWithRole;
}

export function Booking({ complex }: BookingProps) {
  const isMobile = useIsMobile();

  return (
    <BookingProvider complex={complex}>
      {isMobile ? (
        <BookingMobile />
      ) : (
        <div className="flex flex-col gap-5">
          <BookingHeader />
          <BookingToolbar />
          <BookingTimeline />
          <div className="grid gap-5 xl:grid-cols-4">
            <BookingDaySummary />
            <BookingQuickActions />
          </div>
        </div>
      )}
      <BookingCreateDialog />
      <BookingToolsDialog />
    </BookingProvider>
  );
}