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

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

// Configs
import { config as configControl } from './list-cfg.control'
import { config as configLetter } from './list-cfg.letter'

const props = defineProps<{
  data: LetterData[]
  menu?: string
  selected?: string
  paginationMeta?: PaginationMeta
}>()

const menu = props.menu || 'control'

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

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

<template>
  <PubMyUiDataTable
    v-bind="menu === 'control' ? configControl : configLetter"
    :rows="props.data"
    :selected="props.selected"
  />
  <PaginationView
    v-if="paginationMeta"
    :pagination-meta="paginationMeta"
    @page-change="handlePageChange"
  />
</template>

