import { Spinner } from '@heroui/react';
import { Sidebar } from './Sidebar';
import { Header } from './Header';
import { useApp } from '../../context/AppContext';

export function AppLayout({ children }: { children: React.ReactNode }) {
  const { loading, guilds } = useApp();

  if (loading) {
    return (
      <div className="flex min-h-screen items-center justify-center">
        <Spinner color="primary" label="Dashboard wird geladen..." size="lg" />
      </div>
    );
  }

  if (!guilds.length) {
    return (
      <div className="flex min-h-screen items-center justify-center">
        <p className="text-default-500">Keine Server verfügbar</p>
      </div>
    );
  }

  return (
    <div className="flex h-screen overflow-hidden">
      <div className="hidden shrink-0 lg:block">
        <Sidebar />
      </div>

      <main className="flex flex-1 flex-col overflow-y-auto">
        <div className="mx-auto w-full max-w-[1520px] px-6 py-6">
          <Header />
          {children}
        </div>
      </main>
    </div>
  );
}