import React from 'react';
// IMPORT DU CSS LOCAL (Isole les styles du dashboard)
import "./dashboard.css"; 

import Header from "./components/Header";
import MobileFooter from "./components/MobileFooter";

export default function UserDashboardLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    /* 
       Nous créons un "contexte" html/body virtuel pour cette section.
       Note: Next.js injectera ceci dans le <body> principal, 
       mais les styles seront scopés grâce à l'import ci-dessus.
    */
    <div className="min-h-screen flex flex-col font-display bg-background-light dark:bg-background-dark text-[#111418] dark:text-white">
      
      {/* Chargement des ressources externes (Polices & Icônes) */}
      {/* On utilise <style> ou <link> ici pour que ce soit chargé avec ce layout */}
      <link 
        rel="stylesheet" 
        href="https://fonts.googleapis.com/css2?family=Lexend:wght@300;400;500;600;700&display=swap" 
      />
      <link 
        rel="stylesheet" 
        href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" 
      />

      <Header />
      
      <main className="flex-1 px-6 lg:px-40 py-8">
        {children}
      </main>
      
      <MobileFooter />
    </div>
  );
}