<script lang="ts">
    import AppSidebar from "$lib/components/app-sidebar.svelte";
    import * as Breadcrumb from "$lib/components/ui/breadcrumb/index.js";
    import { Separator } from "$lib/components/ui/separator/index.js";
    import * as Sidebar from "$lib/components/ui/sidebar/index.js";
    import { mainNavTree } from "$lib/core/constants";
    import { breadcrumbs, session, user } from "$lib/global.stores";
    import { onMount } from "svelte";
    import type { LayoutData } from "./$types";

    breadcrumbs.set([mainNavTree[0]]);

    let { children, data }: { children: any; data: LayoutData } = $props();

    onMount(() => {
        if (data.user) {
            user.set(data.user);
        }
        if (data.session) {
            session.set(data.session);
        }
    });
</script>

<Sidebar.Provider>
    <AppSidebar />
    <Sidebar.Inset>
        <header
            class="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-16"
        >
            <div class="flex items-center gap-2 px-4">
                <Sidebar.Trigger class="-ml-1" />
                <Separator orientation="vertical" class="mr-2 h-4" />
                <Breadcrumb.Root>
                    <Breadcrumb.List>
                        {#if $breadcrumbs.length > 0}
                            {#each $breadcrumbs as breadcrumb, i}
                                <Breadcrumb.Item class="hidden md:block">
                                    <Breadcrumb.Link href={breadcrumb.url}>
                                        {breadcrumb.title}
                                    </Breadcrumb.Link>
                                </Breadcrumb.Item>
                                {#if i < $breadcrumbs.length - 1}
                                    <Breadcrumb.Separator
                                        class="hidden md:block"
                                    />
                                {/if}
                            {/each}
                        {/if}
                    </Breadcrumb.List>
                </Breadcrumb.Root>
            </div>
        </header>
        <main class="p-8 md:p-4">
            {@render children()}
        </main>
    </Sidebar.Inset>
</Sidebar.Provider>
