@if ($paginator->hasPages())
    <div class="flex items-center justify-between mt-4">
        {{-- Botón Anterior --}}
        <div>
            @if ($paginator->onFirstPage())
                <span class="px-4 py-2 text-gray-400 border border-gray-200 rounded-lg cursor-not-allowed">
                    Anterior
                </span>
            @else
                <button wire:click="previousPage('{{ $paginator->getPageName() }}')" wire:loading.attr="disabled"
                    class="px-4 py-2 text-gray-700 border border-gray-300 rounded-lg hover:bg-gray-50 disabled:opacity-50">
                    Anterior
                </button>
            @endif
        </div>

        {{-- Información de página --}}
        <div class="text-sm text-gray-600">
            Página {{ $paginator->currentPage() }} de {{ $paginator->lastPage() }}
        </div>

        {{-- Botón Siguiente --}}
        <div>
            @if ($paginator->hasMorePages())
                <button wire:click="nextPage('{{ $paginator->getPageName() }}')" wire:loading.attr="disabled"
                    class="px-4 py-2 text-gray-700 border border-gray-300 rounded-lg hover:bg-gray-50 disabled:opacity-50">
                    Siguiente
                </button>
            @else
                <span class="px-4 py-2 text-gray-400 border border-gray-200 rounded-lg cursor-not-allowed">
                    Siguiente
                </span>
            @endif
        </div>
    </div>
@endif
