<template>
  <div v-if="filteredCount > 0" class="flex items-center justify-between gap-4 border-t border-violet-100 px-6 py-4 text-sm text-slate-500">
    <span><strong class="text-violet-800">{{ rangeStart }}–{{ rangeEnd }}</strong> von {{ filteredCount }}</span>
    <div class="flex items-center gap-2">
      <button
        class="grid h-9 w-9 place-items-center rounded-full border border-violet-200 text-violet-600 transition hover:bg-violet-50 disabled:opacity-40 disabled:hover:bg-transparent"
        :disabled="page <= 1"
        @click="$emit('update:page', page - 1)"
      >
        <ChevronLeft class="h-4 w-4" />
      </button>
      <span class="min-w-[72px] text-center font-semibold text-slate-700">Seite {{ page }}/{{ totalPages }}</span>
      <button
        class="grid h-9 w-9 place-items-center rounded-full border border-violet-200 text-violet-600 transition hover:bg-violet-50 disabled:opacity-40 disabled:hover:bg-transparent"
        :disabled="page >= totalPages"
        @click="$emit('update:page', page + 1)"
      >
        <ChevronRight class="h-4 w-4" />
      </button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ChevronLeft, ChevronRight } from '@lucide/vue'

defineProps<{
  page: number
  totalPages: number
  rangeStart: number
  rangeEnd: number
  filteredCount: number
}>()

defineEmits<{
  'update:page': [page: number]
}>()
</script>
