<template>
  <div>
    <div class="sm:hidden">
      <label for="tabs" class="sr-only">Select a tab</label>
      <select
        class="block w-full rounded-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500"
      >
        <option>My Account</option>

        <option>Company</option>

        <option selected>Team Members</option>

        <option>Billing</option>
      </select>
    </div>
    <div class="hidden sm:block">
      <div class="border-b border-gray-200">
        <nav :class="classes" class="-mb-px flex space-x-8" aria-label="Tabs">
          <a
            v-for="tab in tabs"
            :key="tab.name"
            @click="switchTab(tab.name)"
            :class="
              activeTab == tab.name
                ? 'border-indigo-600 text-indigo-700 hover:text-indigo-800'
                : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700'
            "
            class="group inline-flex cursor-pointer items-center whitespace-nowrap border-b-2 py-4 px-1 text-sm font-medium"
            :id="id"
          >
            <c-icon
              v-if="tab.icon"
              :name="tab.icon"
              class="-ml-0.5 mr-2 h-5 w-5"
              type="solid"
              :class="
                activeTab == tab.name
                  ? 'text-indigo-700 group-hover:text-indigo-800'
                  : 'text-gray-400 group-hover:text-gray-500 '
              "
            ></c-icon>
            <span
              :class="
                activeTab == tab.name
                  ? 'font-semibold text-indigo-700'
                  : 'text-gray-500 hover:text-gray-700'
              "
            >
              {{ tab.text }}
            </span>
          </a>
        </nav>
      </div>
      <slot></slot>
    </div>
  </div>
</template>
<script>
import CIcon from "../CIcon/CIcon.vue";
export default {
  name: "CAnchorTabs",
  components: { CIcon },
  props: {
    tabs: {
      type: Array,
      required: true,
    },
    initialTab: {
      type: String,
    },
    classes: {
      type: String,
    },
    id: {
      type: String,
    },
  },
  data() {
    return {
      activeTab: this.initialTab,
    };
  },
  methods: {
    switchTab(name) {
      this.activeTab = name;
      this.$emit("tabSwitched", name);
    },
    switchTabForMobile(index) {
      var selectedOption = this.tabs[index];
      this.activeTab = selectedOption.text;
    },
  },
  watch: {
    initialTab() {
      this.activeTab = this.value;
    },
  },
};
</script>
