import Header from "@/components/header/Header";
import Nav from "@/components/header/Nav";
import Footer from "@/components/footer/Footer";
import { AccountSidebar } from "@/components/account/AccountSidebar";

export default async function accountLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <div className="flex flex-col min-h-screen bg-background text-foreground">
      <Header />
      <Nav />

      <main className="flex-grow flex flex-col w-full max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <header className="mb-8">
          <h1 className="text-3xl font-bold tracking-tight">Mein Konto</h1>
          <p className="text-muted-foreground mt-1">Verwalte deine Bestellungen, Adressen und Kontoeinstellungen.</p>
        </header>

        <div className="flex flex-col md:flex-row gap-8 items-start">
          {/* Left Sidebar with subtle background */}
          <aside className="w-full md:w-64 shrink-0 bg-muted/30 rounded-lg border border-border/50 overflow-hidden">
            <AccountSidebar />
          </aside>

          {/* Main Content Area */}
          <section id="main-content" className="flex-grow w-full min-w-0">
            <div className="rounded-lg border border-border/50 bg-card p-6 shadow-sm">
              {children}
            </div>
          </section>
        </div>
      </main>

      <Footer />
    </div>
  );
}