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

@php
    $classes = match($type) {
        'success' => 'alert-success',
        'error', 'danger' => 'alert-danger',
        'warning' => 'alert-warning',
        default => 'alert-info',
    };
    $icon = match($type) {
        'success' => 'check-circle',
        'error', 'danger' => 'exclamation-triangle',
        'warning' => 'exclamation-circle',
        default => 'info-circle',
    };
@endphp

<div {{ $attributes->merge(['class' => "alert {$classes} d-flex align-items-center gap-2 " . ($dismissible ? 'alert-dismissible fade show' : ''), 'role' => 'alert']) }} @if($dismissible) data-auto-dismiss @endif>
    <i class="bi bi-{{ $icon }}"></i>
    <div class="flex-grow-1">{{ $slot }}</div>
    @if($dismissible)
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    @endif
</div>