<template>
  <nav class="guide-nav">
    <button
      v-for="section in sections"
      :key="section.id"
      class="guide-nav-btn"
      :class="{ active: active === section.id }"
      @click="$emit('select', section.id)"
    >
      <span class="guide-nav-icon">{{ section.icon }}</span>
      <span class="guide-nav-text">{{ section.title }}</span>
    </button>
  </nav>
</template>

<script setup>
defineProps({
  sections: { type: Array, required: true },
  active: { type: String, default: '' },
})
defineEmits(['select'])
</script>

<style lang="less" scoped>
.guide-nav {
  display: flex;
  flex-wrap: wrap;
  gap: @space-sm;
  margin-bottom: @space-2xl;

  .respond-md({
    justify-content: center;
    gap: @space-md;
  });
}

.guide-nav-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: @space-sm @space-md;
  background: @color-bg-white;
  border: 1px solid @color-border;
  border-radius: @border-radius-full;
  cursor: pointer;
  font-size: @font-size-sm;
  color: @color-text-secondary;
  transition: all @transition-fast;
  white-space: nowrap;

  &:hover {
    border-color: @color-primary-light;
    color: @color-primary;
  }

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

.guide-nav-icon {
  font-size: @font-size-base;
}
</style>
