<template>
  <div>
    <div class="border-b border-gray-200">
      <div class="mt-2 max-w-5xl pr-4">
        <nav class="-mb-px flex space-x-8" aria-label="Tabs">
          <button
            v-for="tab in tabs"
            :key="tab.key"
            :class="[
              activeTab === tab.key
                ? 'border-b-2 border-indigo-600 text-indigo-700'
                : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700',
              'flex whitespace-nowrap py-4 px-1 text-sm font-medium',
            ]"
            :id="getActionIDFn(tab.label)"
            @click="handleChangeTab(tab)"
            aria-current="page"
          >
            {{ tab.label }}
            <div class="ml-1" v-if="tab.count">
              <span
                :class="
                  activeTab == tab.key
                    ? 'rounded-full bg-indigo-100 px-2 py-0.5 text-indigo-700'
                    : 'rounded-full bg-gray-100 px-2 py-0.5 text-gray-700'
                "
              >
                {{ tab.count }}
              </span>
            </div>
          </button>
        </nav>
      </div>
    </div>
    <div>
      <component
        :is="currentTabComponent"
        :currentTabComponent="currentTabComponent"
        :activeTab="activeTab"
        :data="data"
      />
    </div>
  </div>
</template>

<script>
import { getActionID } from "../../helper";

export default {
  name: "CTabLazy",
  props: {
    tabs: {
      type: Array,
      required: true,
    },
    currentTabComponent: {
      type: String,
      required: true,
    },
    id: {
      type: String,
    },
    data: {
      type: Object,
      required: false,
    },
  },
  data() {
    return {
      activeTab: this.tabs[0].key,
    };
  },
  methods: {
    getActionIDFn(name) {
      return getActionID(name, this.id);
    },
    handleChangeTab(tab) {
      this.activeTab = tab.key;
      this.$emit("switchTab", this.activeTab);
    },
  },
};
</script>
