<script>
	import favicon from '$lib/assets/favicon.svg';
	import "../app.css";
	import AppSidebar from "$lib/components/app-sidebar.svelte";
	import * as Sidebar from "$lib/components/ui/sidebar/index.js";
	import * as Breadcrumb from "$lib/components/ui/breadcrumb/index.js";
	import { ModeWatcher } from "mode-watcher";
	import SunIcon from "@lucide/svelte/icons/sun";
  	import MoonIcon from "@lucide/svelte/icons/moon";
	import { toggleMode } from "mode-watcher";
	import { Button } from "$lib/components/ui/button/index.js";
	import { Separator } from "$lib/components/ui/separator/index.js";

	let { children, data } = $props();
</script>

<svelte:head>
	<link rel="icon" href={favicon} />
</svelte:head>

<Sidebar.Provider>
	<AppSidebar />
	<Sidebar.Inset class="flex flex-col h-screen overflow-hidden">
		<header class="flex h-10 shrink-0 items-center justify-between gap-2">
			<div class="flex items-center gap-2 px-4">
				<Sidebar.Trigger class="-ml-1" />
				<Separator orientation="vertical" class="mr-2 data-[orientation=vertical]:h-4" />
				<Breadcrumb.Root>
					<Breadcrumb.List>
						<Breadcrumb.Item class="hidden md:block">
							<Breadcrumb.Page>{data.title}</Breadcrumb.Page>
						</Breadcrumb.Item>
					</Breadcrumb.List>
				</Breadcrumb.Root>
			</div>
			<div class="flex items-center gap-2 px-2">
				<Button onclick={toggleMode} variant="ghost" size="icon" class="size-7">
					<SunIcon
						class="w-4 h-4 rotate-0 scale-100 !transition-all dark:-rotate-90 dark:scale-0"
					/>
					<MoonIcon
						class="absolute w-4 h-4 rotate-90 scale-0 !transition-all dark:rotate-0 dark:scale-100"
					/>
					<span class="sr-only">Toggle theme</span>
				</Button>
			</div>
		</header>
		<Separator />
		<div class="flex-1 min-h-0 overflow-hidden">
			{@render children?.()}
		</div>
	</Sidebar.Inset>
</Sidebar.Provider>

<ModeWatcher />
