'use client';

/**
 * App-Shell fuer angemeldete Bereiche: einklappbare Sidebar links,
 * Inhalt dynamisch daneben (passt sich der Sidebar-Breite an).
 * Theme-Toggle, Profil-Badge und Abmelden befinden sich in der Sidebar.
 */
import { Sidebar } from '@/components/layout/Sidebar';

export function AppShell({
  role,
  userEmail,
  username,
  children,
}: {
  role: 'ADMIN' | 'USER';
  /** E-Mail des angemeldeten Benutzers (Fallback fuer das Profil-Badge). */
  userEmail: string;
  /** Frei waehlbarer Anzeigename; wird im Badge bevorzugt. */
  username?: string | null;
  children: React.ReactNode;
}) {
  return (
    <div className="flex min-h-screen">
      <Sidebar role={role} userEmail={userEmail} username={username} />
      <div className="flex min-w-0 flex-1 flex-col">
        <main className="flex-1 overflow-x-hidden px-4 py-10">
          <div className="mx-auto max-w-3xl">{children}</div>
        </main>
      </div>
    </div>
  );
}