<script lang="ts" module>
	type ToastItem = {
		id: number;
		message: string;
		variant: 'success' | 'error';
	};

	let toasts = $state<ToastItem[]>([]);
	let nextId = 0;

	export function toast(message: string, variant: 'success' | 'error' = 'success') {
		const id = nextId++;
		toasts.push({ id, message, variant });
		setTimeout(() => {
			toasts = toasts.filter((t) => t.id !== id);
		}, 3000);
	}
</script>

<script lang="ts">
	import { cn } from '$lib/utils';
</script>

{#if toasts.length > 0}
	<div class="toast-container">
		{#each toasts as item (item.id)}
			<div class={cn('toast', `toast--${item.variant}`)}>
				{#if item.variant === 'success'}
					<svg class="toast-icon toast-icon--success" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
						<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/>
						<polyline points="22 4 12 14.01 9 11.01"/>
					</svg>
				{:else}
					<svg class="toast-icon toast-icon--error" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
						<circle cx="12" cy="12" r="10"/>
						<line x1="15" y1="9" x2="9" y2="15"/>
						<line x1="9" y1="9" x2="15" y2="15"/>
					</svg>
				{/if}
				<span>{item.message}</span>
			</div>
		{/each}
	</div>
{/if}

<style>
	.toast-container {
		position: fixed;
		bottom: 24px;
		right: 24px;
		z-index: 90;
		display: flex;
		flex-direction: column;
		gap: var(--sp-2);
	}

	.toast {
		padding: var(--sp-3) var(--sp-4);
		border-radius: var(--radius-sm, 8px);
		background: var(--card);
		border: 1px solid var(--border);
		box-shadow: var(--card-shadow);
		font-size: var(--text-sm);
		color: var(--text-1);
		display: flex;
		align-items: center;
		gap: var(--sp-2);
		animation: slideUp 0.3s ease;
	}

	@keyframes slideUp {
		from {
			transform: translateY(10px);
			opacity: 0;
		}
		to {
			transform: translateY(0);
			opacity: 1;
		}
	}

	.toast-icon {
		width: 18px;
		height: 18px;
		flex-shrink: 0;
	}

	.toast-icon--success {
		color: var(--success);
	}

	.toast-icon--error {
		color: var(--error);
	}
</style>
