@props(['paginator'])

@if ($paginator)
    <div {{ $attributes->merge(['class' => 'flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between']) }}>
        <p class="text-sm font-semibold text-booklio-muted">
            Showing
            <span class="font-extrabold text-booklio-dark">{{ $paginator->firstItem() ?? 0 }}</span>
            to
            <span class="font-extrabold text-booklio-dark">{{ $paginator->lastItem() ?? 0 }}</span>
            of
            <span class="font-extrabold text-booklio-dark">{{ $paginator->total() }}</span>
            results
        </p>

        <div class="min-w-0 overflow-x-auto booklio-scrollbar">
            {{ $paginator->onEachSide(1)->links() }}
        </div>
    </div>
@endif