<script setup lang="ts">
import { computed } from 'vue'
import type { FdsTableProps } from './types'

const props = withDefaults(defineProps<FdsTableProps>(), {
  bordered: false,
  compact: false,
  dataTestid: undefined,
})

const wrapperClasses = computed(() => [
  'fds-table-wrapper',
  props.bordered && 'fds-table-wrapper--bordered',
  props.compact && 'fds-table-wrapper--compact',
])

const rootAttrs = computed(() => {
  const attrs: Record<string, string> = {}
  if (props.dataTestid) {
    attrs['data-testid'] = props.dataTestid
  }
  return attrs
})

defineSlots<{
  default?: unknown
}>()
</script>

<template>
  <div :class="wrapperClasses" v-bind="rootAttrs">
    <slot />
  </div>
</template>
