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

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>
	);
}