<!--
  Task 7: Toast/notification system with slide-in animations, icons, auto-dismiss, stacking.
-->
<script lang="ts">
	import { toasts, type ToastType } from '$lib/stores/toast';
	import { IconCheck, IconX, IconAlert, IconInfo } from '$lib/components/icons';

	const bgMap: Record<ToastType, string> = {
		success: 'bg-[var(--color-success)]',
		error: 'bg-[var(--color-danger)]',
		warning: 'bg-[var(--color-warning)]',
		info: 'bg-[var(--color-info)]'
	};
</script>

<div class="fixed top-4 right-4 z-[100] flex flex-col gap-2 pointer-events-none">
	{#each $toasts as toast (toast.id)}
		<div
			class="pointer-events-auto flex items-center gap-3 rounded-xl px-4 py-3 text-white shadow-lg animate-slide-in {bgMap[toast.type]}"
			role="alert"
		>
			<div class="flex h-5 w-5 flex-shrink-0 items-center justify-center">
				{#if toast.type === 'success'}
					<IconCheck size={18} />
				{:else if toast.type === 'error'}
					<IconX size={18} />
				{:else if toast.type === 'warning'}
					<IconAlert size={18} />
				{:else}
					<IconInfo size={18} />
				{/if}
			</div>
			<span class="flex-1 text-sm font-medium">{toast.message}</span>
			<button
				class="ml-2 rounded-md p-0.5 text-white/70 hover:text-white transition-colors"
				onclick={() => toasts.remove(toast.id)}
				aria-label="Dismiss notification"
			>
				<IconX size={16} />
			</button>
		</div>
	{/each}
</div>
