@props([
    'currentPage' => 1,
    'totalPages' => 1,
    'pages' => [],
    'slug_id' => '',
    'opt' => [],
    'perPage' => 0,
])

<nav class="mt-12" aria-label="pagination">
    <ul class="flex justify-center items-center gap-1 sm:gap-2 select-none">
        <li>
            <button class="group flex items-center justify-center w-9 h-9 sm:w-10 sm:h-10 rounded-full border border-gray-200 bg-white text-med-dark transition-all duration-200 {{ $currentPage <= 1 ? '' : 'hover:bg-med-primary hover:text-white hover:border-med-primary' }}" type="button" @disabled($currentPage <= 1) wire:click="previous('{{ $slug_id }}', '{{ json_encode($opt) }}')">
                <i class="fa-solid fa-chevron-left text-xs sm:text-sm"></i>
            </button>
        </li>
        @foreach ($pages as $p)
            <li>
                @if ($p != '...')
                    <button class="flex items-center justify-center w-9 h-9 sm:w-10 sm:h-10 rounded-full transition-all duration-200 {{ $currentPage == $p ? 'bg-med-primary text-white font-medium shadow-md' : 'border border-gray-200 bg-white text-med-dark hover:bg-gray-50 hover:text-med-primary hover:border-med-primary' }}" type="button" wire:click="setPage({{ $p }}, '{{ $slug_id }}', '{{ json_encode($opt) }}')">
                        {{ $p }}
                    </button>
                @else
                    <span class="flex items-center justify-center w-9 h-9 sm:w-10 sm:h-10 text-gray-400 font-medium tracking-widest">...</span>
                @endif
            </li>
        @endforeach
        <li>
            <button class="group flex items-center justify-center w-9 h-9 sm:w-10 sm:h-10 rounded-full border border-gray-200 bg-white text-med-dark transition-all duration-200 {{ $currentPage >= $totalPages ? '' : 'hover:bg-med-primary hover:text-white hover:border-med-primary' }}" type="button" wire:click="next('{{ $slug_id }}', '{{ json_encode($opt) }}')" @disabled($currentPage >= $totalPages)>
                <i class="fa-solid fa-chevron-right text-xs sm:text-sm"></i>
            </button>
        </li>
    </ul>
</nav>