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

	function toneClasses(tone: Toast['tone']): string {
		switch (tone) {
			case 'success':
				return 'bg-green-600 text-white dark:bg-green-500';
			case 'warning':
				return 'bg-amber-500 text-white dark:bg-amber-400 dark:text-gray-900';
			case 'error':
				return 'bg-red-600 text-white dark:bg-red-500';
			default:
				return 'bg-gray-900 text-white dark:bg-gray-800';
		}
	}
</script>

<div
	class="pointer-events-none fixed inset-x-0 z-[60] flex flex-col items-center gap-2 px-4"
	style="bottom: calc(env(safe-area-inset-bottom) + 5rem)"
	role="region"
	aria-live="polite"
	aria-label="Benachrichtigungen"
	data-testid="toaster"
>
	{#each $toasts as t (t.id)}
		<button
			type="button"
			onclick={() => dismissToast(t.id)}
			class="pointer-events-auto w-full max-w-sm rounded-xl px-4 py-3 text-left text-sm font-medium shadow-lg transition active:scale-[0.98] {toneClasses(t.tone)}"
			data-testid="toast"
			data-toast-tone={t.tone}
		>
			{t.message}
		</button>
	{/each}
</div>
