<script lang="ts">
	import { AlertCircle, CheckCircle2, Info } from 'lucide-svelte';

	interface Props {
		type?: 'error' | 'success' | 'info';
		message: string;
	}

	let { type = 'info', message }: Props = $props();

	const styles = {
		error: 'bg-red-50 border-red-200 text-red-800',
		success: 'bg-green-50 border-green-200 text-green-800',
		info: 'bg-blue-50 border-blue-200 text-blue-800'
	};

	const icons = {
		error: AlertCircle,
		success: CheckCircle2,
		info: Info
	};
</script>

{#if message}
	<div class="flex items-start gap-3 rounded-lg border p-3 {styles[type]}">
		<svelte:component this={icons[type]} class="h-5 w-5 flex-shrink-0" />
		<p class="text-sm">{message}</p>
	</div>
{/if}
