<script lang="ts">
	import { fly } from 'svelte/transition';
	import { CheckCircle, XCircle, AlertTriangle, Info, X } from 'lucide-svelte';
	import type { Toast } from '$lib/stores';

	interface Props {
		toast: Toast;
		onDismiss: (id: string) => void;
	}

	let { toast, onDismiss }: Props = $props();

	// Icon mapping
	const icons = {
		success: CheckCircle,
		error: XCircle,
		warning: AlertTriangle,
		info: Info
	};

	// Color mapping for DaisyUI
	const alertClasses = {
		success: 'alert-success',
		error: 'alert-error',
		warning: 'alert-warning',
		info: 'alert-info'
	};

	const IconComponent = icons[toast.type];
</script>

<div
	role="alert"
	class="alert {alertClasses[toast.type]} shadow-lg"
	transition:fly={{ y: -20, duration: 300 }}
>
	<IconComponent class="h-6 w-6" />
	<span>{toast.message}</span>

	{#if toast.dismissible}
		<button
			class="btn btn-circle btn-ghost btn-sm"
			onclick={() => onDismiss(toast.id)}
			aria-label="Dismiss notification"
		>
			<X class="h-4 w-4" />
		</button>
	{/if}
</div>
