@props([
    'type' => 'info',
    'message' => null,
    'dismissible' => true,
])

@php
    $alertClass = match($type) {
        'success' => 'alert-success',
        'danger', 'error' => 'alert-danger',
        'warning' => 'alert-warning',
        default => 'alert-info',
    };
    $iconClass = match($type) {
        'success' => 'bi-check-circle-fill',
        'danger', 'error' => 'bi-exclamation-octagon-fill',
        'warning' => 'bi-exclamation-triangle-fill',
        default => 'bi-info-circle-fill',
    };
@endphp

<div {{ $attributes->merge(['class' => "alert {$alertClass} d-flex align-items-center shadow-sm " . ($dismissible ? 'alert-dismissible fade show' : '')]) }} role="alert">
    <i class="bi {{ $iconClass }} fs-5 me-2 flex-shrink-0"></i>
    <div class="flex-grow-1">
        {{ $message ?? $slot }}
    </div>
    @if($dismissible)
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    @endif
</div>