<script lang="ts">
	import OutlineIcon from '$lib/components/ui/OutlineIcon.svelte';
	import type { OutlineIconName } from '$lib/components/ui/OutlineIcon.svelte';
	import { dismissToast, getToasts, type ToastType } from '$lib/stores/toast.svelte';

	const toasts = $derived(getToasts());

	const typeConfig: Record<ToastType, { toast: string; ring: string; iconName: OutlineIconName }> = {
		success: { toast: 'toast-native-success', ring: 'icon-ring-emerald', iconName: 'check' },
		error: { toast: 'toast-native-error', ring: 'icon-ring-rose', iconName: 'warning' },
		warning: { toast: 'toast-native-warning', ring: 'icon-ring-amber', iconName: 'warning' },
		info: { toast: 'toast-native-info', ring: 'icon-ring-sky', iconName: 'file' }
	};
</script>

<div class="toast-viewport" aria-live="polite" aria-relevant="additions">
	{#each toasts as toast (toast.id)}
		{@const config = typeConfig[toast.type]}
		<div
			role="status"
			class="toast-native {config.toast} {toast.leaving ? 'toast-native-leave' : 'toast-native-enter'}"
		>
			<span class="toast-native-icon">
				<span class="icon-ring icon-ring-rounded icon-ring-xs {config.ring}">
					<OutlineIcon name={config.iconName} size="xs" />
				</span>
			</span>
			<p class="toast-native-message">{toast.message}</p>
			<button
				type="button"
				class="toast-native-close"
				aria-label="Tutup notifikasi"
				onclick={() => dismissToast(toast.id)}
			>
				×
			</button>
		</div>
	{/each}
</div>
