<script lang="ts">
  import { ModeWatcher } from 'mode-watcher';
  import AppSidebar from '$lib/components/app-sidebar.svelte';
  import SiteHeader from '$lib/components/site-header.svelte';
  import * as Sidebar from '$lib/components/ui/sidebar/index.js';
  import type { Snippet } from 'svelte';

  let { data, children }: { data: { title: string }; children?: Snippet } = $props();
</script>

<ModeWatcher />

<AppSidebar variant="inset" collapsible="icon" title={data.title}>
  <Sidebar.Inset>
    <SiteHeader title={data.title} />
    <main class="flex flex-1 flex-col">
      {@render children?.()}
    </main>
  </Sidebar.Inset>
</AppSidebar>