<script lang="ts">
	import { toasts } from '$lib/stores/toasts.svelte.ts';
	import { i18n, t } from '$lib/i18n/index.svelte.ts';

	const closeLabel = $derived(i18n.current === 'en' ? 'Close' : 'Schließen');
</script>

{#if toasts.items.length > 0}
	<div
		class="fixed bottom-4 right-4 z-50 flex flex-col gap-2"
		role="region"
		aria-live="polite"
		aria-label={t('common.notifications')}
	>
		{#each toasts.items as t (t.id)}
			<div
				class="flex items-start gap-3 rounded-lg px-4 py-3 shadow-lg max-w-sm border bg-[var(--color-card)] border-[var(--color-border)]"
				class:text-[var(--color-success)]={t.kind === 'success'}
				class:text-[var(--color-warning)]={t.kind === 'warning'}
				class:text-[var(--color-danger)]={t.kind === 'error'}
				role={t.kind === 'error' ? 'alert' : 'status'}
			>
				<span class="flex-1 text-sm">{t.message}</span>
				<button
					class="text-[var(--color-muted)] hover:text-[var(--color-fg)] text-lg leading-none"
					onclick={() => toasts.dismiss(t.id)}
					aria-label={closeLabel}
				>
					×
				</button>
			</div>
		{/each}
	</div>
{/if}
