<script>
  import { browser } from '$app/environment';
  import { onMount } from 'svelte';

  import Header from '$lib/components/Header.svelte';
  import Footer from '$lib/components/Footer.svelte';
  import Analytics from '$lib/components/Analytics.svelte';

	let { children } = $props();

	let mounted = $state(false);

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

<Analytics />

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

<style>
  main {
    flex: 1; /* This pushes footer to bottom */
    padding: 0;
    min-height: 90vh;
  }
</style>
