"use client";

import { cn } from "@/lib/utils";
import { TopBar } from "@/components/layout/top-bar";
import { Sidebar, SidebarProvider, useSidebar } from "@/components/layout/sidebar";

function ShellContent({ children }: { children: React.ReactNode }) {
  const { collapsed } = useSidebar();

  return (
    <div className="relative min-h-screen">
      <div className="gradient-mesh pointer-events-none fixed inset-0 z-0" />
      <TopBar />
      <Sidebar />
      <main
        className={cn(
          "relative z-10 pt-16 transition-[margin-left] duration-200 ease-in-out",
          collapsed ? "ml-16" : "ml-60"
        )}
      >
        <div className="p-4 sm:p-6 lg:p-8">{children}</div>
      </main>
    </div>
  );
}

export function AppShell({ children }: { children: React.ReactNode }) {
  return (
    <SidebarProvider>
      <ShellContent>{children}</ShellContent>
    </SidebarProvider>
  );
}