<script setup lang="ts">
import type { PaginationMeta } from '~/components/pub/custom-ui/pagination/pagination.type'
import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'

interface Props {
  data: any[]
  paginationMeta?: PaginationMeta
}

defineProps<Props>()

const emit = defineEmits<{
  pageChange: [page: number]
}>()

function handlePageChange(page: number) {
  emit('pageChange', page)
}
</script>

<template>
  <div class="space-y-4">
    <PubBaseDataTable
    :rows="data" :cols="cols" :header="header" :keys="keys" :func-parsed="funcParsed"
      :func-html="funcHtml" :func-component="funcComponent" :skeleton-size="paginationMeta?.pageSize"
/>

    <template v-if="paginationMeta">
      <div v-if="paginationMeta.totalPage > 1">
        <PubCustomUiPagination :pagination-meta="paginationMeta" @page-change="handlePageChange" />
      </div>
    </template>

  </div>
</template>
