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

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

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

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

/* Tab styling for dark mode */
.inside-window-tab .tabs.is-boxed li a {
  background-color: var(--theme-bg-tertiary);
  border-color: var(--theme-border);
  color: var(--theme-text-primary);
}

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

.inside-window-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>