@props([
    'currentPage' => 1,
    'totalPages' => 1,
])

<div class="flex justify-center pb-8">
    <nav class="flex items-center gap-2" role="navigation" aria-label="Pagination Navigation">
        {{-- Previous Button --}}
        <button type="button"
            @if($currentPage <= 1) disabled @endif
            class="w-10 h-10 flex items-center rounded-2xl justify-center bg-white border border-[#F1F1F1] text-black hover:bg-secondary hover:border-transparent hover:text-white transition-colors duration-300 disabled:opacity-50 disabled:cursor-not-allowed"
            aria-label="Previous Page">
            <span class="icon-[tabler--chevron-left] size-5 rtl:rotate-180"></span>
        </button>

        {{-- Page Numbers --}}
        @for ($i = 1; $i <= $totalPages; $i++)
            <button type="button"
                @if($currentPage === $i) aria-current="page" @endif
                class="w-10 h-10 flex items-center rounded-2xl justify-center bg-white border border-[#F1F1F1] text-black hover:bg-secondary hover:border-transparent hover:text-white transition-colors duration-300 aria-[current='page']:bg-secondary aria-[current='page']:text-white aria-[current='page']:border-transparent">
                {{ $i }}
            </button>
        @endfor

        {{-- Next Button --}}
        <button type="button"
            @if($currentPage >= $totalPages) disabled @endif
            class="w-10 h-10 flex items-center rounded-2xl justify-center bg-white border border-[#F1F1F1] text-black hover:bg-secondary hover:border-transparent hover:text-white transition-colors duration-300 disabled:opacity-50 disabled:cursor-not-allowed"
            aria-label="Next Page">
            <span class="icon-[tabler--chevron-right] size-5 rtl:rotate-180"></span>
        </button>
    </nav>
</div>