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

@if ($totalPages > 1)
    <div class="flex justify-center items-center gap-2 mt-12">
        {{-- Previous --}}
        <button class="inline-flex items-center justify-center rounded-md text-sm font-medium px-4 py-2 border border-border bg-background hover:bg-accent hover:text-accent-foreground transition-colors {{ $currentPage === 1 ? 'opacity-50 pointer-events-none' : '' }}" type="button" wire:click="previousPage" @disabled($currentPage === 1)>
            {{ __('frontend::pagination.previous') }}
        </button>

        {{-- Page Numbers --}}
        @for ($page = 1; $page <= $totalPages; $page++)
            <button class="min-w-[40px] inline-flex items-center justify-center rounded-md text-sm font-medium px-3 py-2 border transition-colors
                    {{ $currentPage === $page ? 'bg-primary text-primary-foreground border-primary' : 'border-border bg-background text-foreground hover:bg-accent hover:text-accent-foreground' }}" type="button" wire:click="goToPage({{ $page }})">
                {{ $page }}
            </button>
        @endfor

        {{-- Next --}}
        <button class="inline-flex items-center justify-center rounded-md text-sm font-medium px-4 py-2 border border-border bg-background hover:bg-accent hover:text-accent-foreground transition-colors {{ $currentPage === $totalPages ? 'opacity-50 pointer-events-none' : '' }}" type="button" wire:click="nextPage({{ $totalPages }})" @disabled($currentPage === $totalPages)>
            {{ __('frontend::pagination.next') }}
        </button>
    </div>
@endif