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

<nav aria-label="Pagination" {{ $attributes->merge(['class' => 'flex flex-col items-center justify-between gap-3 border-t border-brand-border px-4 py-3 sm:flex-row']) }}>
    <p class="text-xs text-brand-muted">
        @if ($totalItems !== null)
            {{ $totalItems }} element(s) au total - page {{ $currentPage }} sur {{ $totalPages }}
        @else
            Page {{ $currentPage }} sur {{ $totalPages }}
        @endif
    </p>

    <div class="flex items-center gap-1">
        <button type="button" class="btn btn-secondary btn-sm" @if ($currentPage <= 1) disabled aria-disabled="true" @endif>
            Precedent
        </button>

        @for ($i = 1; $i <= min($totalPages, 5); $i++)
            <button
                type="button"
                class="flex h-8 w-8 items-center justify-center rounded-lg text-sm font-medium {{ $i === $currentPage ? 'bg-brand-primary text-brand-white' : 'text-brand-ink hover:bg-brand-surface' }}"
                @if ($i === $currentPage) aria-current="page" @endif
            >
                {{ $i }}
            </button>
        @endfor

        <button type="button" class="btn btn-secondary btn-sm" @if ($currentPage >= $totalPages) disabled aria-disabled="true" @endif>
            Suivant
        </button>
    </div>
</nav>
