<script lang="ts">
	import { Toast, ToastBody, ToastHeader, Icon } from '@sveltestrap/sveltestrap';
	import { toasts, removeToast, type ToastColor } from './toasts';

	const ICONS: Record<ToastColor, string> = {
		primary: 'info-circle-fill',
		secondary: 'info-circle-fill',
		success: 'check-circle-fill',
		danger: 'exclamation-triangle-fill',
		warning: 'exclamation-circle-fill',
		info: 'info-circle-fill',
		light: 'lightbulb',
		dark: 'question',
	};
</script>

<div class="toast-container position-fixed bottom-0 end-0 p-3">
	{#each $toasts as toast (toast.id)}
		<Toast
			isOpen={true}
			autohide={!toast.persistent}
			delay={5000}
			color={toast.color}
			on:close={() => removeToast(toast.id)}>
			<ToastHeader toggle={() => removeToast(toast.id)} class={`text-${toast.color}`}>
				<Icon slot="icon" name={ICONS[toast.color]} class="me-2" color={toast.color} />
				{toast.header}
			</ToastHeader>
			<ToastBody>
				{toast.body}
			</ToastBody>
		</Toast>
	{/each}
</div>

<style>
	.toast-container {
		z-index: 1090;
	}
</style>
