@props(['type' => 'success', 'message' => null])

<div 
    x-data="{ show: true }"
    x-show="show"
    x-transition
    class="
        relative px-4 py-3 rounded-lg border my-4 flex items-start gap-3
        @if($type === 'success')
            bg-green-100 text-green-900 border-green-300
        @elseif($type === 'error')
            bg-red-100 text-red-900 border-red-300
        @endif
    "
>
    {{-- Icono (Tailwind Elements style) --}}
    @if($type === 'success')
        <span class="text-green-600">
            <i class="fa-solid fa-circle-check"></i>
        </span>
    @endif

    @if($type === 'error')
        <span class="text-red-600">
            <i class="fa-solid fa-circle-exclamation"></i>
        </span>
    @endif

    {{-- Texto --}}
    <div class="flex-1">
        {{ $message ?? $slot }}
    </div>

    {{-- Botón cerrar --}}
    <button @click="show = false" class="absolute right-3 top-3 text-gray-600 hover:text-gray-900">
        <i class="fa-solid fa-xmark"></i>
    </button>
</div>