<script lang="ts">
	import { toast } from '$lib/stores/toast';
	import { fade, fly } from 'svelte/transition';

	function getAlertClass(type: string) {
		switch (type) {
			case 'success':
				return 'alert-success';
			case 'error':
				return 'alert-error';
			case 'warning':
				return 'alert-warning';
			default:
				return 'alert-info';
		}
	}
</script>

<section
	aria-label="Notifications alt+T"
	tabindex="-1"
	aria-live="polite"
	aria-relevant="additions text"
	aria-atomic="false"
	class="fixed bottom-4 right-4 z-50 flex flex-col gap-2"
>
	{#each $toast as item (item.id)}
		<div
			role="alert"
			class="alert shadow-lg {getAlertClass(item.type)}"
			transition:fly={{ y: 20, duration: 300 }}
		>
			<span>{item.message}</span>
			<button class="btn btn-sm btn-ghost" on:click={() => toast.remove(item.id)}>✕</button>
		</div>
	{/each}
</section>
