@props([
    'type' => 'info',
    'title' => null,
])

@php
    $typeClasses = match($type) {
        'success' => 'bg-emerald-50 border-emerald-300 text-emerald-800',
        'warning' => 'bg-amber-50 border-amber-300 text-amber-800',
        'danger' => 'bg-rose-50 border-rose-300 text-rose-800',
        default => 'bg-sky-50 border-sky-300 text-sky-800',
    };
@endphp

<div {{ $attributes->merge(['class' => "p-4 rounded-xl border flex items-start gap-3 {$typeClasses}"]) }} role="alert">
    <div class="flex-shrink-0 mt-0.5">
        @if($type === 'success')
            <svg class="w-5 h-5 text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
        @elseif($type === 'warning')
            <svg class="w-5 h-5 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path></svg>
        @elseif($type === 'danger')
            <svg class="w-5 h-5 text-rose-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
        @else
            <svg class="w-5 h-5 text-sky-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
        @endif
    </div>
    <div class="flex-1 text-sm">
        @if($title)
            <h4 class="font-bold mb-1">{{ $title }}</h4>
        @endif
        <div class="text-xs sm:text-sm">
            {{ $slot }}
        </div>
    </div>
</div>