<script lang="ts">
  import Header from '$lib/components/Header.svelte';
  import { toast } from '$lib/stores/toast.js';
  import Toast from '$lib/components/Toast.svelte';
  import { onMount } from 'svelte';
  import { auth } from '$lib/stores/auth.js';
  import { page } from '$app/stores';
  import '../app.css';

  onMount(() => {
    auth.init();
  });

  $: showHeader = !$page.url.pathname.startsWith('/login') && !$page.url.pathname.startsWith('/register');
</script>

<div class="min-h-screen bg-gray-50 font-sans">
  {#if showHeader}
    <Header />
  {/if}
  
  <main class="flex-1">
    <slot />
  </main>
  
  <!-- Toast notifications -->
  {#each $toast.toasts as toastMessage (toastMessage.id)}
    <Toast
      type={toastMessage.type}
      message={toastMessage.message}
      duration={toastMessage.duration}
      on:dismiss={() => toast.dismiss(toastMessage.id)}
    />
  {/each}
</div>