<script lang="ts" module>
    import BriefcaseIcon from "@lucide/svelte/icons/briefcase";
</script>

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

    const data = $state({
        teams: [{ name: "Personal", logo: BriefcaseIcon, plan: "Standard" }],
        navItems: mainNavTree,
    });

    let {
        ref = $bindable(null),
        collapsible = "icon",
        ...restProps
    }: ComponentProps<typeof Sidebar.Root> = $props();
</script>

<Sidebar.Root bind:ref {collapsible} {...restProps}>
    <!-- <Sidebar.Header>
		<TeamSwitcher teams={data.teams} />
	</Sidebar.Header> -->
    <Sidebar.Content class="pt-2">
        <NavMain items={data.navItems} />
    </Sidebar.Content>
    <Sidebar.Footer>
        <NavUser />
    </Sidebar.Footer>
    <Sidebar.Rail />
</Sidebar.Root>
