<script lang="ts">
  import { toast } from "$lib/stores/toast";
  import { fly, fade } from "svelte/transition";
  import { quintOut } from "svelte/easing";

  // Icons for different toast types
  const icons = {
    success: {
      path: "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z",
      color: "text-green-500",
      bg: "bg-green-500/10",
      border: "border-green-500/20",
    },
    error: {
      path: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z",
      color: "text-red-500",
      bg: "bg-red-500/10",
      border: "border-red-500/20",
    },
    warning: {
      path: "M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z",
      color: "text-yellow-500",
      bg: "bg-yellow-500/10",
      border: "border-yellow-500/20",
    },
    info: {
      path: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z",
      color: "text-blue-500",
      bg: "bg-blue-500/10",
      border: "border-blue-500/20",
    },
  };
</script>

<!-- Toast Container -->
<div class="fixed top-4 right-4 z-[9999] flex flex-col gap-2 pointer-events-none">
  {#each $toast.toasts as toastItem (toastItem.id)}
    {@const style = icons[toastItem.type]}
    <div
      in:fly={{ y: -20, duration: 300, easing: quintOut }}
      out:fade={{ duration: 200 }}
      class="pointer-events-auto flex items-center gap-3 px-4 py-3 bg-[var(--color-surface)] backdrop-blur-lg border {style.border} rounded-lg shadow-2xl min-w-[300px] max-w-md"
    >
      <!-- Icon -->
      <div class="flex-shrink-0 w-6 h-6 rounded-full {style.bg} flex items-center justify-center">
        <svg class="w-4 h-4 {style.color}" fill="currentColor" viewBox="0 0 24 24">
          <path d={style.path}/>
        </svg>
      </div>

      <!-- Message -->
      <p class="flex-1 text-sm text-white font-medium">
        {toastItem.message}
      </p>

      <!-- Close button -->
      <button
        onclick={() => toast.dismiss(toastItem.id)}
        class="flex-shrink-0 text-gray-400 hover:text-white transition-colors"
        aria-label="Dismiss"
      >
        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
        </svg>
      </button>
    </div>
  {/each}
</div>
