<script lang="ts">
  import * as Sidebar from '$lib/components/ui/sidebar/index.js';
  import NavMain from './nav-main.svelte';
  import NavUser from './nav-user.svelte';
  import type { Snippet } from 'svelte';

  let {
    variant = 'inset',
    collapsible = 'icon',
    title = '',
    children,
  }: {
    variant?: 'sidebar' | 'floating' | 'inset';
    collapsible?: 'offcanvas' | 'icon' | 'none';
    title?: string;
    children?: Snippet;
  } = $props();
</script>

<Sidebar.Provider {variant} {collapsible}>
  <Sidebar.Root>
    <Sidebar.Header>
      <a
        href="/"
        class="flex items-center gap-2 px-2 py-1.5 text-sm font-medium"
      >
        <span class="bg-primary text-primary-foreground flex size-6 items-center justify-center rounded-md">
          <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
            <path d="M4 11a9 9 0 0 1 9 9" />
            <path d="M4 4a16 16 0 0 1 16 16" />
            <circle cx="5" cy="19" r="1" />
          </svg>
        </span>
        <span class="truncate">{title}</span>
      </a>
    </Sidebar.Header>
    <Sidebar.Content>
      <NavMain />
    </Sidebar.Content>
    <Sidebar.Footer>
      <NavUser />
    </Sidebar.Footer>
  </Sidebar.Root>
  {@render children?.()}
</Sidebar.Provider>