@props([
    'type' => 'submit', // Tipo del botón
    'variant' => 'primary', // Variantes: primary, success, warning, danger, neutral
    'href' => null, // Ruta para los enlaces
    'loading' => false, // Estado de carga
])

@php
    // Clases base para todos los botones
    $baseClasses = 'inline-block font-bold py-2 px-6 rounded-lg shadow-md transition duration-300 ease-in-out flex items-center justify-center ';

    // Clases específicas según la variante
    $variantClasses = match ($variant) {
        'danger' => 'bg-red-600 hover:bg-red-800 text-white', // Rojo oscuro
        'warning' => 'bg-yellow-400 hover:bg-yellow-600 text-white', // Amarillo
        'success' => 'bg-blue-500 hover:bg-blue-600 text-white', // Azul marino
        'neutral' => 'bg-gray-400 bg-opacity-90 hover:bg-gray-700 hover:bg-opacity-75 text-white',
        default => 'bg-blue-500 hover:bg-blue-600 text-white', // Primary (default as azul eléctrico)
    };

    // Combinar clases
    $buttonClasses = $baseClasses . $variantClasses;
@endphp
<div x-data="{ loading: @js($loading) }" class="relative">
    <!-- Overlay para bloquear la pantalla -->
    <div
        x-show="loading"
        class="fixed inset-0 bg-gray-900 bg-opacity-50 z-50 flex items-center justify-center"
    >
        <!-- Spinner central -->
        <div class="flex flex-col items-center">
            <svg
                class="animate-spin h-10 w-10 text-white"
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 24 24"
            >
                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z"></path>
            </svg>
            <p class="text-white mt-4">Cargando, por favor espera...</p>
        </div>
    </div>

    <!-- Botón -->
    @if ($href)
        <!-- Si href está presente, crear un enlace -->
        <a href="{{ $href }}"
           {{ $attributes->merge(['class' => $buttonClasses]) }}
           @click="loading = true">
            <span x-show="!loading">{{ $slot }}</span>
            <svg
                x-show="loading"
                class="animate-spin h-5 w-5 text-white ml-2"
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 24 24"
            >
                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z"></path>
            </svg>
        </a>
    @else
        <!-- Si no es un enlace, renderizar un botón -->
        <button
            {{ $attributes->merge(['type' => $type, 'class' => $buttonClasses]) }}
            @click="if ($el.closest('form').checkValidity()) { loading = true; $el.closest('form').submit(); } else { event.preventDefault(); }">
            <span x-show="!loading">{{ $slot }}</span>
            <svg
                x-show="loading"
                class="animate-spin h-5 w-5 text-white ml-2"
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 24 24"
            >
                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z"></path>
            </svg>
        </button>
    @endif
</div>