@php
    $base = 'relative rounded-md p-4 text-sm flex items-start gap-2 border mb-3';
    $colors = [
        'success' => 'bg-green-100 text-green-800 border-green-300',
        'danger' => 'bg-red-100 text-red-800 border-red-300',
        'warning' => 'bg-yellow-100 text-yellow-800 border-yellow-300',
        'info' => 'bg-blue-100 text-blue-800 border-blue-300',
    ];
    $class = $colors[$type] ?? $colors['info'];
@endphp

<div
    x-data="{ show: true }"
    x-init="@if($timeout > 0) setTimeout(() => show = false, {{ $timeout }}); @endif"
    x-show="show"
    x-transition
    {{ $attributes->merge(['class' => "$base $class"]) }}
>
    <div class="flex-1">
        {{ $slot }}
    </div>

    @if ($dismissable)
        <button
            type="button"
            class="absolute top-1 right-1 text-xl leading-none text-inherit hover:opacity-70 focus:outline-none"
            @click="show = false"
            aria-label="Close"
        >
            &times;
        </button>
    @endif
</div>