import { Outlet } from 'react-router-dom';
import Header from './Header';
import { useAuth } from '../../hooks/useAuth';

interface LayoutProps {
  theme: 'dark' | 'light';
  onToggleTheme: () => void;
}

export default function Layout({ theme, onToggleTheme }: LayoutProps) {
  const { user, loading } = useAuth();

  return (
    <div className="min-h-screen bg-od-bg text-od-text">
      <Header
        theme={theme}
        onToggleTheme={onToggleTheme}
        user={loading ? null : user}
      />
      <main className="mx-auto max-w-5xl px-4 py-8">
        <Outlet />
      </main>
    </div>
  );
}