<script lang="ts">
  import "../app.css";
  import type { Snippet } from 'svelte';
  import { ParaglideJS } from '@inlang/paraglide-sveltekit';
  import { i18n } from '$lib/i18n';
  import { languageTag } from '$lib/paraglide/runtime';
  import * as m from '$lib/paraglide/messages';

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

<svelte:head>
  <title>{m.site_title()}</title>
  <meta name="description" content={m.site_description()} />
</svelte:head>

<ParaglideJS {i18n}>
  <header class="fixed z-50 mix-blend-difference p-1 w-full flex justify-between items-start">
    <a href="/" class="text-white text-2xl">schreifuchs.ch</a>
    <nav class="flex gap-2 p-2">
      <a 
        href="/" 
        hreflang="de" 
        data-no-translate
        class="text-white hover:underline {languageTag() === 'de' ? 'font-bold' : ''}"
      >
        DE
      </a>
      <a 
        href="/en" 
        hreflang="en" 
        data-no-translate
        class="text-white hover:underline {languageTag() === 'en' ? 'font-bold' : ''}"
      >
        EN
      </a>
    </nav>
  </header>
  {@render children?.()}
</ParaglideJS>
