<script setup lang="ts">
import { Folder, FolderOpen, ChevronRight, HardDrive } from 'lucide-vue-next'
import type { FolderTree } from '@/api/folder'

interface Props {
  folders: FolderTree[]
  currentFolderId: string | null
  breadcrumbs: Array<{ id: string | null; name: string }>
}

const props = defineProps<Props>()
const emit = defineEmits(['select'])
</script>

<template>
  <aside class="folder-column">
    <div class="panel-header">
      <span class="panel-kicker">PHASE 01</span>
      <h2>DIRECTORIES</h2>
    </div>
    
    <div class="folder-list">
      <button 
        v-for="folder in props.folders" 
        :key="folder.id" 
        class="folder-item"
        :class="{ active: props.currentFolderId === folder.id || props.breadcrumbs.some(b => b.id === folder.id) }"
        @click="emit('select', folder)"
      >
        <div class="item-icon">
          <FolderOpen v-if="props.currentFolderId === folder.id" :size="20" />
          <Folder v-else :size="20" />
        </div>
        <div class="item-content">
          <span class="item-name">{{ folder.name }}</span>
          <span class="item-meta">{{ folder.children?.length ?? 0 }} SUBFOLDERS</span>
        </div>
        <ChevronRight :size="16" class="item-arrow" />
      </button>

      <div v-if="!props.folders.length" class="empty-state">
        <HardDrive :size="32" class="empty-icon" />
        <span>NO DATA NODES</span>
      </div>
    </div>
  </aside>
</template>
