<template>
  <div>    
    <UContentNavigation 
      :navigation="directoryNavigation" 
      highlight 
      color="primary"
      variant="pill"
    />
  </div>
</template>

<script setup lang="ts">
import type { ContentNavigationItem } from '@nuxt/content'

// 获取导航数据
const navigation = inject<Ref<ContentNavigationItem[]>>('navigation')

// 处理导航数据，只显示一级目录和根目录文件
const directoryNavigation = computed(() => {
  if (!navigation?.value) return []
  
  return navigation.value.map(item => {
    // 如果是根目录文件（没有 children），直接返回
    if (!item.children || item.children.length === 0) {
      return {
        title: item.title,
        path: item.path,
        icon: (item.icon as string) || 'i-lucide-file-text',
        active: Boolean(item.active)
      }
    }
    
    // 如果是一级目录，只保留目录本身，不显示子项
    return {
      title: item.title,
      path: item.path,
      icon: (item.icon as string) || 'i-lucide-folder',
      active: Boolean(item.active),
      // 不包含 children，这样就不会展开显示子项
      children: []
    }
  }).filter(item => item.title && item.path) // 过滤掉空项
})

// 调试信息
// console.log('ContentDirectory: Navigation data:', navigation.value)
// console.log('ContentDirectory: Processed navigation:', directoryNavigation.value)
</script>