@props(['currentPage', 'totalPages'])

@if ($totalPages > 1)
    <nav class="flex justify-center mt-4">
        <ul class="inline-flex space-x-1 items-center">

            {{-- Previous --}}
            <li>
                <button
                    wire:click="setPage({{ max(1, $currentPage - 1) }})"
                    class="px-3 py-1 border rounded {{ $currentPage === 1 ? 'bg-gray-200 cursor-not-allowed' : 'bg-white hover:bg-gray-100' }}"
                    {{ $currentPage === 1 ? 'disabled' : '' }}
                >
                    Prev
                </button>
            </li>

            @php
                $start = max(1, min($currentPage - 2, $totalPages - 4));
                $end = min($totalPages, $start + 4);
            @endphp

            {{-- Leading Pages --}}
            @if ($start > 1)
                <li>
                    <button 
                        wire:click="setPage(1)" 
                        class="px-3 py-1 border rounded {{ $currentPage === 1 ? 'bg-orange-500 text-white' : 'bg-white hover:bg-gray-100' }}"
                    >
                        1
                    </button>
                </li>
                @if ($start > 2)
                    <li><span class="px-2">...</span></li>
                @endif
            @endif

            {{-- Main Range --}}
            @for ($i = $start; $i <= $end; $i++)
                <li>
                    <button 
                        wire:click="setPage({{ $i }})" 
                        class="px-3 py-1 border rounded {{ $currentPage === $i ? 'bg-orange-500 text-white' : 'bg-white hover:bg-gray-100' }}"
                    >
                        {{ $i }}
                    </button>
                </li>
            @endfor

            {{-- Trailing Pages --}}
            @if ($end < $totalPages)
                @if ($end < $totalPages - 1)
                    <li><span class="px-2">...</span></li>
                @endif
                <li>
                    <button 
                        wire:click="setPage({{ $totalPages }})" 
                        class="px-3 py-1 border rounded {{ $currentPage === $totalPages ? 'bg-orange-500 text-white' : 'bg-white hover:bg-gray-100' }}"
                    >
                        {{ $totalPages }}
                    </button>
                </li>
            @endif

            {{-- Next --}}
            <li>
                <button
                    wire:click="setPage({{ min($totalPages, $currentPage + 1) }})"
                    class="px-3 py-1 border rounded {{ $currentPage === $totalPages ? 'bg-gray-200 cursor-not-allowed' : 'bg-white hover:bg-gray-100' }}"
                    {{ $currentPage === $totalPages ? 'disabled' : '' }}
                >
                    Next
                </button>
            </li>
        </ul>
    </nav>
@endif