<script lang="ts">
	import { browser } from '$app/environment';
	import { QueryClient, QueryClientProvider } from '@tanstack/svelte-query';
	import ToastContainer from '$lib/components/ToastContainer.svelte';

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

	const queryClient = new QueryClient({
		defaultOptions: {
			queries: {
				enabled: browser,
				staleTime: 5 * 60_000, // 5 min cache
				refetchOnWindowFocus: false
			}
		}
	});
</script>

<nav class="border-b border-gray-300 bg-gray-50 p-2 text-gray-900">
	<div class="container mx-auto max-w-2xl p-2">
		<div class="flex items-center justify-between">
			<a href="/private/home" class="text-lg font-bold" aria-label="ScanWave Home">ScanWave</a>

			<ul class="flex space-x-4">
				<li><a href="/private/scanner">Scanner</a></li>
				{#if data.profile?.section_position === 'events_manager'}
					<li><a href="/private/events">Events</a></li>
				{/if}
			</ul>
		</div>
	</div>
</nav>


<div class="container mx-auto max-w-2xl bg-white p-2">
	<QueryClientProvider client={queryClient}>
		{@render children()}
	</QueryClientProvider>
</div>

<ToastContainer />

	

