<template>
  <div class="space-y-3">
    <div class="flex flex-wrap items-center justify-between gap-3">
      <div class="flex flex-wrap items-center gap-2 text-xs text-mosquito-ink/70">
        <slot name="filters" />
      </div>
      <div class="flex items-center gap-2 text-xs text-mosquito-ink/70">
        <slot name="actions" />
      </div>
    </div>

    <slot />

    <div v-if="showPagination" class="mt-2 flex items-center justify-between text-xs text-mosquito-ink/70">
      <button class="mos-btn mos-btn-secondary !py-1 !px-2 !text-xs" :disabled="page <= 0" @click="$emit('prev')">
        上一页
      </button>
      <div>第 {{ page + 1 }} / {{ totalPages }} 页</div>
      <button
        class="mos-btn mos-btn-secondary !py-1 !px-2 !text-xs"
        :disabled="page >= totalPages - 1"
        @click="$emit('next')"
      >
        下一页
      </button>
    </div>
  </div>
</template>

<script setup lang="ts">
const props = withDefaults(
  defineProps<{
    page?: number
    totalPages?: number
  }>(),
  {
    page: 0,
    totalPages: 0
  }
)

const showPagination = props.totalPages > 1

defineEmits<{
  prev: []
  next: []
}>()
</script>
