@props(['type' => 'info', 'dismissible' => false])
@php
$classes = match($type) {
    'success' => 'bg-emerald-50 border-emerald-200 text-emerald-800',
    'error' => 'bg-red-50 border-red-200 text-red-800',
    'warning' => 'bg-amber-50 border-amber-200 text-amber-800',
    'info' => 'bg-sky-50 border-sky-200 text-sky-800',
    default => 'bg-slate-50 border-slate-200 text-slate-800',
};
@endphp
<div {{ $attributes->merge(['class' => "rounded-lg border px-4 py-3 $classes"]) }} role="alert" x-data="{ show: true }" x-show="show" x-transition>
    <div class="flex items-start gap-3">
        <div class="flex-1">{{ $slot }}</div>
        @if($dismissible)
        <button type="button" @click="show = false" class="shrink-0 rounded p-1 hover:bg-black/5" aria-label="Dismiss">
            <svg class="h-4 w-4" 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>