<script lang="ts">
	import '../../app.css';
	import favicon from '$lib/assets/favicon.svg';
	import { Toaster } from 'svelte-sonner';
	import { ModeWatcher } from 'mode-watcher';
	import ThemeToggle from '$lib/components/layout/theme-toggle.svelte';

	let { children } = $props();
</script>

<svelte:head>
	<link rel="icon" href={favicon} />
</svelte:head>

<Toaster />
<ModeWatcher />

<div class="flex h-screen min-h-screen flex-col">
	<!-- Header -->
	<div class="flex items-center gap-4 pt-4 pl-6">
		<p class="text-3xl">📚</p>
		<a href="/" class="text-2xl font-semibold">chitai</a>

		<ThemeToggle class="mr-4 ml-auto" />
	</div>

	<!-- Main Content Area -->
	<main class="flex-1">
		{@render children?.()}
	</main>
</div>
