<script lang="ts">
	import { fly } from 'svelte/transition';
	import { flip } from 'svelte/animate';
	import Icon from '$lib/components/icon/Icon.svelte';
	import type { IconId } from '$lib/types/icon-ids.ts';
	import { getContext } from 'svelte';
	import { TOAST_KEY, type ToastState, type ToastType } from '$lib/stores/toast.svelte.ts';
	const toastState = getContext<ToastState>(TOAST_KEY);

	const toastIconMap: Record<ToastType, IconId> = {
		success: 'success',
		error: 'error',
		warning: 'warning',
		info: 'info'
	};
</script>

<div class="toast  toast-top toast-center z-50">
	{#each toastState.toasts as t (t.id)}
		<div
			animate:flip={{ duration: 300 }}
			transition:fly={{ x: 100, duration: 300 }}
			class="alert bg-base-100 text-base-content border-0 shadow-base-300/50 shadow-lg min-w-[200px] flex justify-start"
		>
			<span><Icon Cid={toastIconMap[t.type]} size="24"></Icon></span>
			<span>{t.message}</span>
		</div>
	{/each}
</div>