<!--
    Component: Layout
    Application shell with providers and page wrapper
-->
<script lang="ts">
/**
 * Layout Component
 *
 * Root layout wrapper that provides the application shell structure. Handles favicon,
 * toolbar provider initialization, and renders child routes with consistent structure.
 *
 * Layout structure:
 * - Header area (currently empty, reserved for future use)
 *
 * - Footer area (currently empty, reserved for future use)
 */
import { themeManager } from '$features/ChangeAppTheme';
import GD from '$shared/assets/GD.svg';
import { ResponsiveProvider } from '$shared/lib';
import { cn } from '$shared/shadcn/utils/shadcn-utils';
import {
    type Snippet,
    onDestroy,
    onMount,
} from 'svelte';

interface Props {
    /**
     * Content snippet
     */
    children: Snippet;
}

let { children }: Props = $props();
let fontsReady = $state(true);
const theme = $derived(themeManager.value);

onMount(() => themeManager.init());
onDestroy(() => themeManager.destroy());
</script>

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

    <link rel="preconnect" href="https://api.fontshare.com" />
    <link
        rel="preconnect"
        href="https://cdn.fontshare.com"
        crossorigin="anonymous"
    />

    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link
        rel="preconnect"
        href="https://fonts.gstatic.com"
        crossorigin="anonymous"
    />
    <link
        rel="preload"
        as="style"
        href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Space+Grotesk:wght@300..700&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&family=Syne:wght@800&display=swap"
    />
    <link
        rel="stylesheet"
        href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Space+Grotesk:wght@300..700&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&family=Syne:wght@800&display=swap"
        media="print"
        onload={(e => ((e.currentTarget as HTMLLinkElement).media = 'all'))}
    />
    <noscript>
        <link
            rel="stylesheet"
            href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Space+Grotesk:wght@300..700&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&family=Syne:wght@800&display=swap"
        />
    </noscript>
    <title>GlyphDiff | Typography & Typefaces</title>
</svelte:head>

<ResponsiveProvider>
    <div
        id="app-root"
        class={cn(
            'min-h-screen w-auto flex flex-col bg-surface dark:bg-dark-bg',
            theme === 'dark' ? 'dark' : '',
        )}
    >
        {#if fontsReady}
            {@render children?.()}
        {/if}
        <footer></footer>
    </div>
</ResponsiveProvider>
