<template>
  <div :class="[wrapperClass, tabsWrapperClasses]">
    <slot />
  </div>
</template>

<script>
import { computed, defineComponent } from "vue";

export default defineComponent({
  name: "NTabsItems",
  provide() {
    return {
      selectedValue: computed(() => this.value),
      variant: this.variant,
    };
  },
  props: {
    value: {
      type: [String, Number],
      default: "",
    },
    wrapperClass: {
      type: String,
      default: "",
    },
  },
  computed: {
    tabsWrapperClasses() {
      const { variantClass } = this;
      let classes = "n-tabs-items-wrapper";

      if (variantClass) {
        classes += variantClass;
      }

      return classes;
    },
  },
  mounted() {
    const children = this.$children;

    console.log(children);
  },
});
</script>
