<!-- TODO: should be buttons not anchor tags -->
<template>
  <div class="c-tabs js-tabs" ref="tabs">
    <nav>
      <div class="c-tabs__nav d-flex" role="tablist">
        <a :href="'#' + item.id" class="c-tabs__item" :aria-selected="item.active" role="tab" :aria-controls="item.id"
          v-for="(item, index) in items" :key="index">{{ item.title }}</a>

        <div class="c-tabs__dropdown ml-auto">
          <a href="#" class="c-tabs__expander c-tabs__item me-0">More</a>
          <div class="c-tabs__dropdown-menu" aria-expanded="false" aria-hidden="true" tabindex="-1">
            <a :href="'#' + item.id" class="c-tabs__dropdown-menu-item" :aria-selected="item.active" role="tab"
              :aria-controls="item.id" v-for="(item, index) in items" :key="index">{{
                item.title
              }}</a>
          </div>
        </div>
      </div>
    </nav>
    <div class="c-tabs-content">
      <div v-for="(item, index) in items" :key="index" class="c-tabs__pane" :aria-hidden="!item.active" :id="item.id"
        role="tabpanel" :aria-labelledby="item.id" v-html="item.content"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import type TabItem from '../../models/TabItem';
import { onMounted, onUnmounted, ref } from 'vue';
import Tabs from './tabs';

defineProps<{
  items: TabItem[];
}>();

const tabs = ref<any>(null);
let instance: Tabs | null;

onMounted(() => {
  instance = new Tabs(document, tabs.value);
});

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