<script setup>
const props = defineProps({
  modelValue: String,
  tabs: Array
})

const emit = defineEmits(['update:modelValue'])

const openTab = (tab) => {
  emit('update:modelValue', tab.value)
}
</script>

<template>
  <div class="bg-hexfff overflowX-auto flexGrow-1">
    <div class="tabs is-boxed">
      <ul class="px-1.5rem mt-1">
        <li v-for="(tab, index) in tabs" :id="index" :class="{'is-active': tab.value === modelValue}">
          <a @click="openTab(tab)">
            <span :class="{'fg-hex999': tab.value !== modelValue}">{{ tab.text }}</span>
          </a>
        </li>
      </ul>
    </div>
  </div>
</template>

<style scoped>
.item:not(.active) {
  color: inherit;
}
</style>