<script setup>
import { computed, useSlots } from "vue";
import DataTable from "primevue/datatable";

const props = defineProps({
  value: { type: Array, default: () => [] },
  loading: { type: Boolean, default: false },
  dataKey: { type: String, default: "id" },
  responsiveLayout: { type: String, default: "scroll" },
});

const slots = useSlots();
const forwardedSlotNames = computed(() =>
  Object.keys(slots || {}).filter((n) => n !== "default" && n !== "empty"),
);
</script>

<template>
  <DataTable
    :value="value"
    :loading="loading"
    :data-key="dataKey"
    :striped-rows="false"
    :responsive-layout="responsiveLayout"
    v-bind="$attrs"
  >
    <slot />

    <template v-if="$slots.empty" #empty>
      <div class="text-center py-6 text-surface-500">
        <slot name="empty" />
      </div>
    </template>

    <template
      v-for="name in forwardedSlotNames"
      :key="name"
      #[name]="slotProps"
    >
      <slot :name="name" v-bind="slotProps" />
    </template>
  </DataTable>
</template>
