{{--
Usage: @include('layouts.components.pagination', ['paginator' => $items])
Wraps Laravel's paginator with design system styling.
--}}

@if(isset($paginator) && $paginator->hasPages())
<nav class="flex flex-col sm:flex-row items-center justify-between gap-3 mt-5">
    <p class="text-xs text-gray-500">
        Showing <span class="font-medium text-gray-700">{{ $paginator->firstItem() }}</span>
        to <span class="font-medium text-gray-700">{{ $paginator->lastItem() }}</span>
        of <span class="font-medium text-gray-700">{{ $paginator->total() }}</span> results
    </p>
    <div class="flex items-center gap-1">
        {{-- Previous --}}
        @if($paginator->onFirstPage())
            <span class="w-8 h-8 rounded-lg border border-gray-200 flex items-center justify-center text-gray-300 cursor-not-allowed">
                <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="15 18 9 12 15 6"/></svg>
            </span>
        @else
            <a href="{{ $paginator->previousPageUrl() }}" class="btn-icon w-8 h-8">
                <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="15 18 9 12 15 6"/></svg>
            </a>
        @endif

        {{-- Page Numbers --}}
        @foreach($paginator->getUrlRange(max(1, $paginator->currentPage() - 2), min($paginator->lastPage(), $paginator->currentPage() + 2)) as $page => $url)
            @if($page == $paginator->currentPage())
                <span class="w-8 h-8 rounded-lg bg-primary-600 text-white flex items-center justify-center text-xs font-medium">{{ $page }}</span>
            @else
                <a href="{{ $url }}" class="w-8 h-8 rounded-lg border border-gray-200 bg-white flex items-center justify-center text-xs text-gray-600 hover:bg-gray-50 transition-colors">{{ $page }}</a>
            @endif
        @endforeach

        {{-- Next --}}
        @if($paginator->hasMorePages())
            <a href="{{ $paginator->nextPageUrl() }}" class="btn-icon w-8 h-8">
                <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
            </a>
        @else
            <span class="w-8 h-8 rounded-lg border border-gray-200 flex items-center justify-center text-gray-300 cursor-not-allowed">
                <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
            </span>
        @endif
    </div>
</nav>
@endif