<script>
import theme from "#build/b24ui/prose/table";
</script>

<script setup>
import { computed } from "vue";
import { useAppConfig } from "#imports";
import { useComponentProps } from "../../composables/useComponentProps";
import { tv } from "../../utils/tv";
import B24TableWrapper from "./../TableWrapper.vue";
defineOptions({ inheritAttrs: false });
const _props = defineProps({
  as: { type: null, required: false, default: "div" },
  rounded: { type: Boolean, required: false, default: true },
  zebra: { type: Boolean, required: false, default: true },
  rowHover: { type: Boolean, required: false, default: true },
  bordered: { type: Boolean, required: false, default: true },
  class: { type: null, required: false },
  b24ui: { type: Object, required: false }
});
defineSlots();
const props = useComponentProps("prose.table", _props);
const appConfig = useAppConfig();
const b24ui = computed(() => tv({ extend: theme, ...appConfig.b24ui?.prose?.table || {} })());
</script>

<template>
  <B24TableWrapper
    :as="props.as"
    data-slot="root"
    :class="b24ui.root({ class: [props.b24ui?.root, props.class] })"
    :zebra="props.zebra"
    :row-hover="props.rowHover"
    :rounded="props.rounded"
    :bordered="props.bordered"
    size="sm"
  >
    <table data-slot="base" :class="b24ui.base({ class: props.b24ui?.base })">
      <slot />
    </table>
  </B24TableWrapper>
</template>
