<script lang="ts">
  import { toast } from '$lib/stores/toast';
  import ToastNotification from './ToastNotification.svelte';

  // Subscribe to the toast store using Svelte 5 reactivity
  let toasts = $derived($toast);

  function handleDismiss(id: string) {
    toast.remove(id);
  }
</script>

<!-- Toast container positioned in top-left corner -->
<div class="fixed top-4 p-2 space-y-3 pointer-events-none max-w-2xl">
  {#each toasts as toastItem (toastItem.id)}
    <div class="pointer-events-auto">
      <ToastNotification
        message={toastItem.message}
        type={toastItem.type}
        duration={toastItem.duration}
        onDismiss={() => handleDismiss(toastItem.id)}
      />
    </div>
  {/each}
</div>
