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

{#each toastStore.notifications as notification (notification.id)}
    <div
        class="fixed bottom-8 left-1/2 -translate-x-1/2 z-[200] px-6 py-4 rounded-lg shadow-lg
               font-[family-name:var(--kv-font-button)] text-lg uppercase
               {notification.type === 'error'
            ? 'bg-red-600 text-kv-white'
            : notification.type === 'success'
              ? 'bg-green-600 text-kv-white'
              : 'bg-blue-600 text-kv-white'}"
        role="alert"
        style="bottom: calc(2rem + {toastStore.notifications.indexOf(notification) * 4}rem)"
    >
        <div class="flex items-center gap-3">
            <span>{notification.message}</span>
            <button
                onclick={() => toastStore.dismiss(notification.id)}
                class="ml-2 opacity-70 hover:opacity-100"
                aria-label="Dismiss"
            >
                ✕
            </button>
        </div>
    </div>
{/each}
