<script>
  import { onMount } from 'svelte';
  import { browser } from '$app/environment';
  import '$lib/styles/fonts.css';
  import '$lib/styles/variables.css';
  import '$lib/styles/global.css';

  import favicon from '$lib/assets/favicon.svg';

  import Footer from '$lib/components/Footer.svelte';
  import LanguageSwitch from '$lib/components/LanguageSwitch.svelte';

  let { children } = $props();

  let mounted = $state(false);

  if (browser) {
    onMount(() => {
      mounted = true;
    });
  }
</script>

<svelte:head>
  <link rel="icon" href={favicon} />
  <meta name="theme-color" content="#fe9335" />
  <meta name="apple-mobile-web-app-title" content="Leonardo Murça" />
</svelte:head>

{#if mounted}
  <LanguageSwitch />
  <main>
    {@render children()}
  </main>
  <Footer />
{/if}

<style>
  main {
    background-color: white;
  }
</style>
