<template>
  <nav class="faq-nav" aria-label="问题分类">
    <ul class="faq-nav-list">
      <li v-for="cat in categories" :key="cat.id">
        <a
          :href="`#${cat.id}`"
          class="faq-nav-item"
          :class="{ active: activeCat === cat.id }"
          @click.prevent="$emit('select', cat.id)"
        >
          {{ cat.name }}
          <span class="faq-nav-count">{{ cat.questions.length }}</span>
        </a>
      </li>
    </ul>
  </nav>
</template>

<script setup>
defineProps({
  categories: { type: Array, required: true },
  activeCat: { type: String, default: '' },
})

defineEmits(['select'])
</script>

<style lang="less" scoped>
.faq-nav {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;

  // 移动端右侧渐变提示可横滑
  mask-image: linear-gradient(to right, #000 85%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, #000 85%, transparent 100%);

  .respond-md({
    mask-image: none;
    -webkit-mask-image: none;
    overflow-x: visible;
  });
}

.faq-nav-list {
  display: flex;
  gap: @space-sm;
  min-width: max-content;

  .respond-md({
    justify-content: center;
    flex-wrap: wrap;
  });
}

.faq-nav-item {
  display: inline-flex;
  align-items: center;
  gap: @space-xs;
  padding: @space-sm @space-lg;
  font-size: @font-size-sm;
  color: @color-text-secondary;
  background: @color-bg-gray;
  border-radius: @border-radius-full;
  text-decoration: none;
  white-space: nowrap;
  transition: all @transition-fast;
  min-height: 44px;
  touch-action: manipulation;

  &:hover {
    background: @color-primary-bg;
    color: @color-primary;
  }

  &.active {
    background: @color-primary;
    color: #fff;
  }
}

.faq-nav-count {
  font-size: @font-size-xs;
  opacity: 0.7;
}
</style>
