@props(['on'])

<div 
    x-data="{ shown: false, timeout: null }"
    x-init="@this.on('{{ $on }}', () => { clearTimeout(timeout); shown = true; timeout = setTimeout(() => { shown = false }, 2000); })"
    x-show="shown"
    x-transition:enter="transform ease-out duration-500 transition"
    x-transition:enter-start="opacity-0 scale-90"
    x-transition:enter-end="opacity-100 scale-100"
    x-transition:leave="transform ease-in duration-500 transition"
    x-transition:leave-start="opacity-100 scale-100"
    x-transition:leave-end="opacity-0 scale-90"
    style="display: none;"
    {{ $attributes->merge(['class' => 'fixed bottom-4 right-4 max-w-sm bg-green-500 text-white font-semibold px-4 py-2 rounded-lg shadow-lg flex items-center space-x-2']) }}
>
    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
        <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m0-3a9 9 0 11-6 16.9A9 9 0 0112 3z" />
    </svg>
    <span>
        {{ $slot->isEmpty() ? 'Guardado exitosamente.' : $slot }}
    </span>
</div>