@props(['variant' => 'default', 'dismissible' => true])

@php
    $styles = [
        'default' => 'bg-blue-50 border-blue-200 text-blue-800',
        'success' => 'bg-green-50 border-green-200 text-green-800',
        'warning' => 'bg-yellow-50 border-yellow-200 text-yellow-800',
        'error' => 'bg-red-50 border-red-200 text-red-800',
    ];
@endphp

<div class="border rounded-lg p-4 {{ $styles[$variant] ?? $styles['default'] }}">
    <div class="flex items-start justify-between gap-3">
        <div class="flex-1">
            {{ $slot }}
        </div>
        @if($dismissible)
            <button type="button" onclick="this.closest('.alert-banner').remove()" class="flex-shrink-0 text-current opacity-70 hover:opacity-100">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
            </button>
        @endif
    </div>
</div>