veza/apps/web/src/components/layout/DashboardLayout.tsx

import type { ReactNode } from 'react';
import { Header } from './Header';
import { Sidebar } from './Sidebar';
import { GlobalPlayer } from '@/features/player/components/GlobalPlayer';

interface DashboardLayoutProps {
  children: ReactNode;
}

/**
 * Layout principal du dashboard avec sidebar et header.
 * Utilise une structure flex avec sidebar fixe et contenu scrollable.
 */
export function DashboardLayout({ children }: DashboardLayoutProps) {
  return (
    <div className="flex h-screen overflow-hidden">
      <Sidebar />
      <div className="flex-1 flex flex-col min-w-0">
        <Header />
        {/* FIX: Ajouter padding-top pour compenser le header fixe (h-16 + mt-4 = 80px = top-20) */}
        <main className="flex-1 overflow-auto pb-24 pt-20">{children}</main>
        <GlobalPlayer />
      </div>
    </div>
  );
}