<script>
	import { flip } from 'svelte/animate';
	import { fly } from 'svelte/transition';
	import { notifications } from '$lib/components/toasts/notifications';
	import { error, info, success, warning } from './icons';


	/** @type {{theme?: any, icon?: any}} */
	let { theme = {
		error: 'alert-error',
		success: 'alert-success',
		warning: 'alert-warning',
		info: 'alert-info'
	}, icon = {
		error: error,
		success: success,
		warning: warning,
		info: info
	} } = $props();
</script>

<div class="toast toast-end mr-4">
	{#each $notifications as notification (notification.id)}
		{@const SvelteComponent = icon[notification.type]}
		<div
			animate:flip={{ duration: 400 }}
			class="alert animate-none {theme[notification.type]}"
			in:fly={{ y: 100, duration: 400 }}
			out:fly={{ x: 100, duration: 400 }}
		>
			<SvelteComponent class="h-6 w-6 flex-shrink-0" />
			<span>{notification.message}</span>
		</div>
	{/each}
</div>
