<script setup lang="ts">
import type { UiGridColumn } from './adapter/contracts'
import { KsDataGrid, KsPaginator } from './components'

const props = withDefaults(defineProps<{
  rows: unknown[]
  columns: UiGridColumn[]
  loading?: boolean
  emptyMessage?: string
  page?: number
  pageSize?: number
  total?: number
}>(), { loading: false, emptyMessage: '표시할 데이터가 없습니다.' })
const emit = defineEmits<{ pageChange: [value: { page: number; pageSize: number }] }>()
</script>

<template>
  <section aria-label="데이터 표" :aria-busy="loading">
    <p v-if="loading">데이터를 불러오는 중입니다.</p>
    <p v-else-if="rows.length === 0">{{ emptyMessage }}</p>
    <KsDataGrid v-else :rows="rows" :columns="columns" height="30rem" />
    <KsPaginator
      v-if="props.page !== undefined && props.pageSize !== undefined && props.total !== undefined"
      :page="props.page"
      :page-size="props.pageSize"
      :total="props.total"
      @page-change="emit('pageChange', $event)"
    />
  </section>
</template>
