import * as React from "react";
import { SidebarProvider, SidebarTrigger, SidebarInset } from "@/components/ui/sidebar";
import { AppSidebar } from "@/components/app-sidebar";
import { SearchSidebar } from "@/components/search-sidebar";
import { MobileFilters } from "@/components/mobile-filters";

export default function DashboardLayout({
  children,
  modal,
}: {
  children: React.ReactNode;
  modal: React.ReactNode;
}) {
  return (
    <SidebarProvider>
      <AppSidebar />
      <SidebarInset className="flex flex-row overflow-hidden">
        <div className="flex-1 flex flex-col min-w-0">
          <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4 lg:hidden">
            <SidebarTrigger />
            <div className="flex-1" />
          </header>
          <main className="flex-1 overflow-y-auto bg-zinc-50 dark:bg-zinc-950">
            {children}
            {modal}
          </main>
          <React.Suspense fallback={null}>
            <MobileFilters />
          </React.Suspense>
        </div>
        <React.Suspense fallback={null}>
          <SearchSidebar />
        </React.Suspense>
      </SidebarInset>
    </SidebarProvider>
  );
}
