<script setup lang="ts">
// Components
import DataTable from '~/components/pub/my-ui/data-table/data-table.vue'
import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue'

// Types
import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'

// Configs
import { config } from './list.cfg'

defineProps<{
  data: any[]
  paginationMeta: PaginationMeta
}>()

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

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

<template>
  <DataTable
    v-bind="config"
    :rows="data"
    :skeleton-size="paginationMeta?.pageSize"
    class="mb-4 border"
  />
  <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
</template>
