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

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

const openTab = async (val) => {
  if(props.modelValue !== val.value) {
    emit('update:modelValue', val.value)
    emit('handler', val)
  }
}
</script>

<template>
  <div class="bg-hexfff overflowX-auto w-100pct">
    <div class="tabs is-boxed">
      <ul class="px-1.5rem">
        <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>