<script setup>
import { useLocale } from '../../../composables/useLocale.js'

const props = defineProps({
  tabs: { type: Array, required: true }, // [{ id, labelKey }]
  modelValue: { type: String, required: true }
})
const emit = defineEmits(['update:modelValue'])

const { t } = useLocale()
</script>

<template>
  <div class="subtabs">
    <button
      v-for="tab in tabs"
      :key="tab.id"
      type="button"
      class="subtabs__btn"
      :class="{ 'is-active': modelValue === tab.id }"
      @click="emit('update:modelValue', tab.id)"
    >
      {{ t(tab.labelKey) }}
    </button>
  </div>
</template>

<style scoped>
.subtabs {
  display: flex;
  gap: var(--space-xs);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-lg);
  overflow-x: auto;
  scrollbar-width: none;
}
.subtabs::-webkit-scrollbar {
  display: none;
}
.subtabs__btn {
  position: relative;
  padding: var(--space-sm) var(--space-md);
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--text-secondary);
  white-space: nowrap;
  transition: color var(--transition);
}
.subtabs__btn:hover {
  color: var(--text-primary);
}
.subtabs__btn.is-active {
  color: var(--accent);
}
.subtabs__btn.is-active::after {
  content: '';
  position: absolute;
  left: var(--space-md);
  right: var(--space-md);
  bottom: -1px;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
}
</style>
