<!-- 分页组件 -->
<template>
  <div class="pagination">
    <ul>
      <li v-for="page in totalPages" :key="page">
        <a href="#" @click="changePage(page)">{{ page }}</a>
      </li>
    </ul>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const props = defineProps({
  totalPages: {
    type: Number,
    default: 1
  }
})

const emit = defineEmits(['changePage'])

const changePage = (page: number) => {
  emit('changePage', page)
}
</script>

<style scoped>
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: var(--spacing-md);
}

.pagination ul {
  display: flex;
  justify-content: center;
  align-items: center;
  list-style: none;
}

.pagination ul li {
  margin: 0 var(--spacing-xs);
}

.pagination ul li a {
  display: block;
  padding: var(--spacing-xs) var(--spacing-sm);
  border: 1px solid var(--border-light);
  border-radius: var(--border-radius);
  font-size: 14px;
  font-weight: 600;
  color: var(--primary-color);
  transition: all var(--transition-normal) ease;
}

.pagination ul li a:hover {
  background-color: var(--primary-color);
  color: var(--text-color);
}
</style>
