<script lang="ts">
	import { dismissToast, toasts } from '$lib/toast';

	const kindClass: Record<string, string> = {
		info: 'border-surface-200 bg-surface-50 text-surface-800',
		success: 'border-success-200 bg-success-50 text-success-800',
		error: 'border-error-200 bg-error-50 text-error-800',
	};
</script>

<div class="pointer-events-none fixed inset-x-0 top-0 z-100 flex flex-col items-end gap-2 p-4">
	{#each $toasts as t (t.id)}
		<div
			class="pointer-events-auto flex max-w-sm items-start gap-3 border px-4 py-3 text-sm shadow-[4px_4px_0_rgb(15_23_42/0.12)] {kindClass[
				t.kind
			] ?? kindClass.info}"
			role="status"
		>
			<p class="min-w-0 flex-1">{t.message}</p>
			<button type="button" class="opacity-60 hover:opacity-100" onclick={() => dismissToast(t.id)} aria-label="关闭">
				×
			</button>
		</div>
	{/each}
</div>
