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

	let { data, children } = $props();
	let sidebarOpen = $state(true);
</script>

<div class="flex h-screen bg-gray-50">
	<Sidebar
		user={data.user}
		companies={data.companies}
		open={sidebarOpen}
		onToggle={() => (sidebarOpen = !sidebarOpen)}
	/>

	<div class="flex flex-1 flex-col overflow-hidden">
		<!-- Top bar -->
		<header class="flex h-14 items-center justify-between border-b border-gray-200 bg-white px-6">
			<button
				onclick={() => (sidebarOpen = !sidebarOpen)}
				class="rounded-md p-1.5 text-gray-500 hover:bg-gray-100 lg:hidden"
			>
				<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
				</svg>
			</button>

			<div class="flex items-center gap-3 ml-auto">
				<span class="text-sm text-gray-700">{data.user.displayName ?? data.user.email}</span>
				<form method="POST" action="/logout">
					<button
						type="submit"
						class="rounded-md px-3 py-1.5 text-sm text-gray-600 hover:bg-gray-100"
					>
						Sign Out
					</button>
				</form>
			</div>
		</header>

		<!-- Main content -->
		<main class="flex-1 overflow-y-auto p-6">
			{@render children()}
		</main>
	</div>
</div>
