<template>
  <div :class="getModifiersClass('c-table', modifiers)">
    <div class="c-table__scroll-container">
      <slot />
    </div>
  </div>
</template>

<script setup lang="ts">
import type { ModifierItems } from './table.config';
import type Table from './table';

import useComponentModifiers from '../../composable/useComponentModifiers';
import { onUnmounted } from 'vue';

const props = defineProps<{
  modifiers?: ModifierItems;
  disableScript?: boolean;
}>();

if (!props.disableScript && typeof document !== 'undefined') {
  let instance: Table | null;
  import('./table')
    .then(({ default: Table }) => (instance = new Table(document)))

  onUnmounted(() => {
    instance?.destroy();
    instance = null;
  });
}

const { getModifiersClass } = useComponentModifiers();
</script>
