import { ReactNode } from 'react';
import { Header } from './Header';
import { useUIStore } from '@/stores/uiStore';
import { CameraOverlay } from '@/components/cameras/CameraOverlay';
import { PersonDetectionAlert } from '@/components/alerts/PersonDetectionAlert';
import { SettingsPanel } from '@/components/settings/SettingsPanel';

interface DashboardProps {
  children: ReactNode;
}

export function Dashboard({ children }: DashboardProps) {
  const cameraOverlayOpen = useUIStore((state) => state.cameraOverlayOpen);
  const personAlertActive = useUIStore((state) => state.personAlertActive);
  const settingsOpen = useUIStore((state) => state.settingsOpen);

  return (
    <div className="h-screen w-screen flex flex-col bg-dark-primary overflow-hidden">
      {/* Header */}
      <Header />

      {/* Main Content */}
      <main className="flex-1 overflow-hidden p-4">
        <div className="h-full grid grid-cols-12 gap-3">
          {children}
        </div>
      </main>

      {/* Camera Overlay */}
      {cameraOverlayOpen && <CameraOverlay />}

      {/* Person Detection Alert */}
      {personAlertActive && <PersonDetectionAlert />}

      {/* Settings Panel */}
      {settingsOpen && <SettingsPanel />}
    </div>
  );
}