<script setup lang="ts">
import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue'
import { config } from './history-list.cfg'
import { CalendarDate, DateFormatter, getLocalTimeZone } from '@internationalized/date'
import type { DateRange } from 'radix-vue'
import { cn } from '~/lib/utils'

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

defineProps<Props>()

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

const df = new DateFormatter('en-US', {
  dateStyle: 'medium',
})

const dateValue = ref({
  start: new CalendarDate(2022, 1, 20),
  end: new CalendarDate(2022, 1, 20).add({ days: 20 }),
}) as Ref<DateRange>

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

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