<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="product-info-tab 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="{'tab-inactive': tab.value !== modelValue}">{{ tab.text }}</span>
          </a>
        </li>
      </ul>
    </div>
  </div>
</template>

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

.product-info-tab {
  background-color: var(--theme-surface);
  transition: background-color 0.3s ease;
}

.tab-inactive {
  color: var(--theme-text-muted);
}

/* Tab styling */
.product-info-tab .tabs.is-boxed li a {
  background-color: var(--theme-bg-tertiary);
  border-color: var(--theme-border);
  color: var(--theme-text-primary);
}

.product-info-tab .tabs.is-boxed li a:hover {
  background-color: var(--theme-bg-hover);
}

.product-info-tab .tabs.is-boxed li.is-active a {
  background-color: var(--theme-surface) !important;
  border-color: var(--theme-border) !important;
  border-bottom-color: var(--theme-surface) !important;
  color: var(--theme-text-primary) !important;
  font-weight: bold;
}
</style>