<script lang="ts">
    import { onMount, onDestroy } from "svelte";
    import { browser } from "$app/environment";
    import { audioStore } from "$lib/stores/audio.svelte";
    import { themeStore } from "$lib/stores/theme.svelte";
    import type { Snippet } from "svelte";
    import faviconKuldvillak from "$lib/assets/favicon-kuldvillak.svg";

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

    onMount(() => {
        if (browser) {
            audioStore.initMusic("/audio/kuldvillak_teema.mp3");
            themeStore.applyTheme();
        }
    });

    onDestroy(() => {
        // Don't destroy on navigation within kuldvillak - only when leaving
    });
</script>

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

{@render children()}
