<script lang="ts">
	import { toast } from '$lib/stores/toast.svelte';
	import { CircleCheck, AlertTriangle, Info, X } from 'lucide-svelte';
</script>

{#if toast.list.length > 0}
	<div class="toast-container">
		{#each toast.list as t (t.id)}
			<div class="toast toast-{t.type}">
				<span class="toast-icon">
					{#if t.type === 'success'}<CircleCheck size={16} />
					{:else if t.type === 'error'}<AlertTriangle size={16} />
					{:else}<Info size={16} />
					{/if}
				</span>
				<span class="toast-msg">{t.message}</span>
				<button class="toast-close" onclick={() => toast.remove(t.id)}>
					<X size={14} />
				</button>
			</div>
		{/each}
	</div>
{/if}

<style>
	.toast-container {
		position: fixed;
		top: 16px;
		right: 16px;
		z-index: 2000;
		display: flex;
		flex-direction: column;
		gap: 8px;
		max-width: 400px;
	}
	.toast {
		display: flex;
		align-items: center;
		gap: 10px;
		padding: 10px 14px;
		border-radius: var(--radius);
		border: 1px solid var(--border);
		background: var(--surface-2);
		color: var(--text);
		font-size: var(--font-size-sm);
		animation: slideIn 0.2s var(--ease);
	}
	@keyframes slideIn { from { transform: translateX(20px); opacity: 0; } }
	.toast-success { border-color: var(--emerald); }
	.toast-success .toast-icon { color: var(--emerald); }
	.toast-error { border-color: var(--rose); }
	.toast-error .toast-icon { color: var(--rose); }
	.toast-info { border-color: var(--cyan); }
	.toast-info .toast-icon { color: var(--cyan); }
	.toast-msg { flex: 1; }
	.toast-close {
		background: none;
		border: none;
		color: var(--text-dim);
		cursor: pointer;
		padding: 2px;
	}
	.toast-close:hover { color: var(--text); }
</style>
