<template>
  <table :class="tableClasses" role="table">
    <slot></slot>
  </table>
</template>

<script setup lang="ts">
import { computed, watchEffect } from 'vue'

interface ITableProps {
  className?: string
  compact?: boolean
  skin?: 'basic' | 'zebra-blue'
  responseView?: boolean
}

const props = withDefaults(defineProps<ITableProps>(), {
  className: String,
  compact: false,
  skin: 'basic',
  responseView: true,
})

watchEffect(() => {
  if (props.skin && !['basic', 'zebra-blue'].includes(props.skin)) {
    console.warn(`Invalid prop: Expected "skin" to be one of ['basic',  'zebra-blue'], but got ${props.skin}`)
  }
})

const tableClasses = computed(() => [
  'pkt-table',
  {
    'pkt-table--responsive': props.responseView,
    'pkt-table--compact': props.compact,
    'pkt-table--basic': props.skin === 'basic',
    'pkt-table--zebra-blue': props.skin === 'zebra-blue',
  },
  props.className,
])
</script>
