<script lang="ts">
	import { fly, scale } from 'svelte/transition';
	import { backOut, quintOut } from 'svelte/easing';
	import { getToasts } from '$lib/stores/toast.svelte';

	const variantStyles: Record<string, { color: string; border: string; bg: string }> = {
		success: { color: '#34d399', border: 'rgba(52,211,153,0.3)', bg: 'rgba(16,185,129,0.08)' },
		info:    { color: '#60a5fa', border: 'rgba(96,165,250,0.3)', bg: 'rgba(59,130,246,0.08)' },
		reward:  { color: '#fbbf24', border: 'rgba(251,191,36,0.3)', bg: 'rgba(245,158,11,0.08)' },
		warning: { color: '#f87171', border: 'rgba(248,113,113,0.3)', bg: 'rgba(239,68,68,0.08)' },
	};
</script>

{#if getToasts().length > 0}
	<div class="fixed top-24 right-4 z-50 flex flex-col gap-2 pointer-events-none">
		{#each getToasts() as t (t.id)}
			{@const style = variantStyles[t.variant] || variantStyles.info}
			<div
				class="pointer-events-auto px-4 py-2.5 rounded-xl font-semibold text-sm shadow-2xl"
				style="
					background: rgba(17,17,17,0.9);
					backdrop-filter: blur(12px);
					border: 1px solid {style.border};
					color: {style.color};
					font-family: var(--font);
					box-shadow: 0 0 20px {style.bg}, 0 8px 32px rgba(0,0,0,0.4);
				"
				in:fly={{ x: 80, duration: 350, easing: backOut }}
				out:scale={{ duration: 200, start: 0.95, opacity: 0 }}
				role="alert"
			>
				{t.message}
			</div>
		{/each}
	</div>
{/if}
