<script lang="ts">
	// Error alert component with Bootstrap alert styling
	export let message: string;
	export let dismissible: boolean = true;
	export let onDismiss: (() => void) | null = null;

	function handleDismiss() {
		if (onDismiss) {
			onDismiss();
		}
	}
</script>

<div class="alert alert-danger {dismissible ? 'alert-dismissible' : ''} fade show" role="alert">
	<i class="bi bi-exclamation-triangle-fill me-2"></i>
	{message}
	{#if dismissible}
		<button
			type="button"
			class="btn-close"
			data-bs-dismiss="alert"
			aria-label="Close"
			on:click={handleDismiss}
		></button>
	{/if}
</div>
