<script setup lang="ts">
defineProps<{
  tabs: string[]
  activeTab: number
}>()

defineEmits<{
  switchTab: [index: number]
}>()

function tabLabel(tab: string): string {
  return tab.replace('.md', '')
}
</script>

<template>
  <div class="config-tabs">
    <button
      v-for="(tab, idx) in tabs"
      :key="tab"
      type="button"
      class="config-tab"
      :class="{ active: activeTab === idx }"
      :aria-current="activeTab === idx ? 'page' : undefined"
      @click="$emit('switchTab', idx)"
    >
      {{ tabLabel(tab) }}
    </button>
  </div>
</template>

<style scoped>
.config-tabs {
  display: flex;
  gap: 1px;
  background: var(--line);
  border-radius: 10px 10px 0 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-bottom: none;
}
.config-tab {
  flex: 1;
  padding: 10px 12px;
  background: var(--glass);
  border: none;
  color: var(--tx-3);
  font-size: 10.5px;
  font-weight: 500;
  cursor: pointer;
  text-align: center;
  transition: background 0.15s, color 0.15s;
  letter-spacing: 0.04em;
  font-family: inherit;
}
.config-tab:hover {
  background: color-mix(in srgb, var(--a-mid) 6%, transparent);
  color: var(--tx-2);
}
.config-tab.active {
  background: color-mix(in srgb, var(--a-mid) 10%, transparent);
  color: var(--tx);
  font-weight: 600;
}

@media (max-width: 640px) {
  .config-tabs {
    flex-wrap: wrap;
  }
  .config-tab {
    flex: 1 0 auto;
    min-width: 80px;
  }
}
</style>
