import AuthGuard from "@/components/guards/AuthGuard";
import { SidebarProvider } from "@/components/ui/sidebar";
import ServerSidebar from "@/components/layout/ServerSidebar";
import Header from "@/components/layout/Header";
import Footer from "@/components/layout/Footer";

export default function AgencyLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <SidebarProvider>
      <div className="flex min-h-screen w-full bg-background text-foreground">
        {/* Collapsible Sidebar */}
        <ServerSidebar />

        {/* Main Layout Container */}
        <div className="flex flex-1 flex-col overflow-hidden">
          {/* Header top bar */}
          <Header />

          {/* Main content body */}
          <main className="flex-1 overflow-y-auto bg-background p-6">
            <div className="mx-auto w-full">
              <AuthGuard allowedRoles={["agency"]}>{children}</AuthGuard>
            </div>
          </main>

          {/* Footer */}
          <Footer />
        </div>
      </div>
    </SidebarProvider>
  );
}