<script lang="ts">
	import '../app.css';
	import '$lib/i18n/index.js';
	import type { Snippet } from 'svelte';
	import type { LayoutData } from './$types.js';
	import MainLayout from '$lib/components/layout/MainLayout.svelte';
	import { page } from '$app/stores';
	import { fade } from 'svelte/transition';
	import { theme } from '$lib/stores/theme.svelte';
	import { ui } from '$lib/stores/ui.svelte';
	import { search } from '$lib/stores/search.svelte';

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

	// Initialize store effects within component context
	theme.initEffects();
	ui.initEffects();
	search.initEffects();

	// Pages that should NOT have the main layout (login, register)
	const noLayoutPaths = ['/login', '/register'];
	const showLayout = $derived(!noLayoutPaths.includes($page.url.pathname));

	const pageKey = $derived($page.url.pathname);
</script>

{#if showLayout}
	<MainLayout
		user={data.user ?? null}
		boards={data.sidebarBoards ?? []}
	>
		{#key pageKey}
			<div in:fade={{ duration: 150, delay: 75 }} out:fade={{ duration: 75 }}>
				{@render children()}
			</div>
		{/key}
	</MainLayout>
{:else}
	{#key pageKey}
		<div in:fade={{ duration: 150, delay: 75 }} out:fade={{ duration: 75 }}>
			{@render children()}
		</div>
	{/key}
{/if}
