<script lang="ts">
	import type { Snippet } from 'svelte';
	import Sidebar from '$lib/components/Sidebar.svelte';
	import TopBar from '$lib/components/TopBar.svelte';
	import type { LayoutData } from './$types';

	let { data, children }: { data: LayoutData; children: Snippet } = $props();
	let sidebarOpen = $state(false);
</script>

<div class="flex min-h-screen">
	<Sidebar
		user={data.user}
		company={data.company}
		companies={data.companies}
		open={sidebarOpen}
		onclose={() => (sidebarOpen = false)}
	/>

	<div class="flex min-w-0 flex-1 flex-col">
		<TopBar onmenu={() => (sidebarOpen = true)} />
		<main class="flex-1 overflow-y-auto">
			<div class="mx-auto max-w-7xl px-4 py-6 lg:px-6">
				{@render children()}
			</div>
		</main>
	</div>
</div>
