<script lang="ts">
	import Footer from '$lib/components/Footer.svelte';
	import Header from '$lib/components/Header.svelte';
	import { Toaster } from 'svelte-sonner';

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

<div
	class="bg-base-100 text-base-content selection:bg-primary selection:text-primary-content flex min-h-screen flex-col font-sans"
>
	<Header />

	<main class="w-full flex-1">
		{@render children()}
	</main>

	<Footer />

	<!-- Toast Notifications (Sonner) -->
	<Toaster position="top-right" richColors closeButton expand={true} />
</div>
