<script setup lang="ts">
interface Props {
  size?: 'xs' | 'sm' | 'md' | 'lg'
}
const props = withDefaults(defineProps<Props>(), {
  size: 'md'
})

const styleClass = computed(() => {
  const sizeVariants = {
    'xs': 'dui-table-xs',
    'sm': 'dui-table-sm',
    'md': 'dui-table-md',
    'lg': 'dui-table-lg',
  }
  const sizeClass = sizeVariants[props.size]
  return [sizeClass]
})
</script>

<template>
  <table class="dui-table" :class="styleClass"><slot></slot></table>
</template>
