<script lang="ts">
	import AppSidebar from "$lib/components/molecules/sidebar/layout-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 { pageTitle } from "$lib/hooks/page-title.svelte";
	import { onMount } from "svelte";
	import { trpcApiStore, svTrpcApiStore } from "$lib/stores/api";
	import { trpc, trpcRaw } from "$lib/trpc/trpc";
	import { sessionInfo, sessionUserInfo } from "$lib/stores/session.info";
	import type { LayoutData } from "./$types";

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

	sessionUserInfo.set(data.user);
	sessionInfo.set(data.session);

	svTrpcApiStore.set(trpc());

	onMount(() => {
		trpcApiStore.set(trpcRaw());
	});
</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-12"
		>
			<div class="flex items-center gap-2 px-4">
				<Sidebar.Trigger />
				<Separator orientation="vertical" class="mr-2 h-4" />
				<Breadcrumb.Root>
					<Breadcrumb.List>
						<Breadcrumb.Item>
							<Breadcrumb.Page>{$pageTitle}</Breadcrumb.Page>
						</Breadcrumb.Item>
					</Breadcrumb.List>
				</Breadcrumb.Root>
			</div>
		</header>

		<div class="flex flex-1 flex-col gap-4 p-4 pt-0">
			<div class="min-h-[100vh] flex-1 md:min-h-min">
				{@render children?.()}
			</div>
		</div>
	</Sidebar.Inset>
</Sidebar.Provider>
