<template>
  <div class="cat-node" :style="{ paddingLeft: depth * 16 + 'px' }">
    <div
      class="nav-item"
      :class="{ active: currentId === category.id }"
      @click="$emit('select', category.id)"
    >
      <span>{{ category.icon || '📁' }}</span>
      {{ category.name }}
      <span v-if="category.itemCount" class="nav-badge">{{ category.itemCount }}</span>
    </div>
    <CategoryTreeNode
      v-for="child in category.children"
      :key="child.id"
      :category="child"
      :depth="depth + 1"
      :current-id="currentId"
      @select="$emit('select', $event)"
    />
  </div>
</template>

<script setup lang="ts">
defineProps<{
  category: any;
  depth: number;
  currentId?: number | null;
}>();

defineEmits<{
  select: [id: number];
}>();
</script>

<style scoped>
.nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border-radius: 7px;
  cursor: pointer;
  color: var(--text2);
  font-size: 13px;
  transition: background 0.15s, color 0.15s;
}
.nav-item:hover { background: var(--bg3); color: var(--text); }
.nav-item.active { background: var(--accent-bg); color: var(--accent); }
.nav-badge {
  margin-left: auto;
  background: var(--bg4);
  color: var(--text3);
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 10px;
  font-family: var(--font-mono);
}
.nav-item.active .nav-badge { background: rgba(200, 169, 126, 0.2); color: var(--accent); }
</style>
