<script>
  import { toasts, removeToast } from '$lib/utils/toast.js';
  import { X, Info, CheckCircle, AlertTriangle, AlertCircle } from 'lucide-svelte';
  import { fly } from 'svelte/transition';

  const icons = {
    info: Info,
    success: CheckCircle,
    warning: AlertTriangle,
    error: AlertCircle,
  };

  const alertClasses = {
    info: 'alert-info',
    success: 'alert-success',
    warning: 'alert-warning',
    error: 'alert-error',
  };
</script>

<div class="toast toast-top toast-end z-50 gap-2">
  {#each $toasts as toast (toast.id)}
    <div
      class="alert {alertClasses[toast.type]} shadow-lg"
      transition:fly={{ x: 100, duration: 300 }}
    >
      <svelte:component this={icons[toast.type]} class="w-5 h-5" />
      <span>{toast.message}</span>
      <button
        class="btn btn-sm btn-ghost btn-circle"
        onclick={() => removeToast(toast.id)}
        aria-label="Dismiss"
      >
        <X class="w-4 h-4" />
      </button>
    </div>
  {/each}
</div>
