import { Outlet } from 'react-router-dom';
import { Header } from './Header';
import { StatusBar } from './StatusBar';
import { UserInfo } from '@/types';

interface LayoutProps {
  isConnected: boolean;
  user?: UserInfo | null;
}

export function Layout({ isConnected, user }: LayoutProps) {
  return (
    <div className="min-h-screen gradient-bg">
      <div className="flex flex-col h-screen overflow-hidden">
        {/* Top Navigation Header */}
        <Header isConnected={isConnected} />

        {/* Page Content */}
        <main className="flex-1 overflow-y-auto p-6 custom-scrollbar">
          <Outlet />
        </main>

        {/* Bottom Status Bar */}
        <StatusBar userName={user?.Name} userDept={user?.Dept} isConnected={isConnected} />
      </div>
    </div>
  );
}
