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

@php
    $colors = [
        'info'    => ['bg' => 'bg-blue-50',   'border' => 'border-blue-300',  'text' => 'text-blue-800',  'icon' => '💡'],
        'warning' => ['bg' => 'bg-amber-50',  'border' => 'border-amber-300', 'text' => 'text-amber-800', 'icon' => '⚠️'],
        'danger'  => ['bg' => 'bg-red-50',    'border' => 'border-red-300',   'text' => 'text-red-800',   'icon' => '🚨'],
        'success' => ['bg' => 'bg-green-50',  'border' => 'border-green-300', 'text' => 'text-green-800', 'icon' => '✅'],
    ];
    $c = $colors[$type] ?? $colors['info'];
@endphp

<div x-data="{ show: true }"
     x-init="setTimeout(() => show = false, 5000)"
     x-show="show"
     x-transition:enter="transition ease-out duration-300"
     x-transition:enter-start="opacity-0 -translate-y-2"
     x-transition:enter-end="opacity-100 translate-y-0"
     x-transition:leave="transition ease-in duration-200"
     x-transition:leave-start="opacity-100 translate-y-0"
     x-transition:leave-end="opacity-0 -translate-y-2"
     class="{{ $c['bg'] }} {{ $c['border'] }} {{ $c['text'] }} border rounded-lg px-4 py-3 flex items-start gap-3 mb-4">

    <span class="text-lg flex-shrink-0">{{ $c['icon'] }}</span>

    <p class="flex-1 text-sm font-medium">{{ $message }}</p>

    @if($dismissible)
        <button @click="show = false"
                class="flex-shrink-0 {{ $c['text'] }} hover:opacity-70 transition-opacity text-lg leading-none"
                aria-label="Dismiss">
            &times;
        </button>
    @endif
</div>
