<script lang="ts">
	import '../app.css';
	import { theme, toggleTheme } from '../stores/themeStore';
	import { onMount } from 'svelte';

	let { children } = $props();

	onMount(() => {
		theme.subscribe((value) => {
			document.documentElement.setAttribute('data-theme', value);
		});
	});
</script>

<div class="flex justify-between p-6">
	<nav>
		<a href="/" class="pr-3">Home</a>
		<a href="/about" class="px-6">About</a>
		<a href="/settings" class="px-6">Settings</a>
	</nav>
	<button onclick={toggleTheme} class="object-right px-6">Toggle Theme</button>
</div>

<div class="p-4">
	{@render children()}
</div>
