<script setup lang="ts">
interface Pageable {
  pageNum: number
  pageSize: number
  total: number
  small: boolean
  disabled: boolean
}

interface PaginationProps {
  layout: string
  pageable: Pageable
  handleSizeChange: (size: number) => void
  handleCurrentChange: (currentPage: number) => void
}

defineProps<PaginationProps>()
</script>
<template>
  <div class="pagination">
    <el-pagination
      :current-page="pageable.pageNum"
      :page-size="pageable.pageSize"
      :page-sizes="[10, 20, 50, 100]"
      :small="pageable.small"
      :disabled="pageable.disabled"
      :background="true"
      :layout="layout"
      :total="pageable.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<style scoped lang="scss">
.pagination {
  display: flex;
  justify-content: end;
  margin-top: 1rem;
}
</style>
