import { createRootRoute, Outlet } from "@tanstack/react-router";
import { TanStackRouterDevtools } from "@tanstack/react-router-devtools";
import { Toaster } from "sonner";
import Header from "@/components/Header";
import { AppSidebar } from "@/components/Sidebar/sidebar";
import {  SidebarProvider } from "@/components/ui/sidebar";
import { ThemeProvider } from "@/lib/theme-provider";

const RootLayout = () => (
	<div className="[--header-height:calc(--spacing(14))]">
		<ThemeProvider>
			<SidebarProvider className="flex flex-col" defaultOpen={false}>
				<Header />

				<div className="relative min-h-[calc(100svh-var(--header-height))]">
					<AppSidebar />

					<main className="w-full p-4">
						<div className="mx-auto w-full max-w-7xl">
							<Outlet />
						</div>
					</main>
				</div>

				<Toaster expand richColors closeButton />
			</SidebarProvider>
		</ThemeProvider>
		<TanStackRouterDevtools />
	</div>
);

export const Route = createRootRoute({ component: RootLayout });