import type { Project } from '../../api'
import type { NavTarget } from '../../data/nav'
import type { Category } from '../../data/types'
import { CategoryNav } from './CategoryNav'
import { ProfileCard } from './ProfileCard'
import { ServicePanel } from './ServicePanel'

/**
 * 左侧栏容器：用户资料 + 本地服务面板 + 分类导航。
 * 只负责布局与数据透传，具体内容由三个子组件分别渲染。
 */
type SidebarProps = {
  projects: Project[]
  /** 内容目录；侧栏直接由它派生 */
  categories: Category[]
  live: boolean
  refreshing: boolean
  onRefresh: () => void
  activeCategoryId?: string
  activeGroupId?: string
  onNavigate: (target: NavTarget) => void
}

export function Sidebar({
  projects,
  categories,
  live,
  refreshing,
  onRefresh,
  activeCategoryId,
  activeGroupId,
  onNavigate,
}: SidebarProps) {
  return (
    <aside className="sidebar">
      <ProfileCard />

      <ServicePanel
        projects={projects}
        live={live}
        refreshing={refreshing}
        onRefresh={onRefresh}
      />

      <CategoryNav
        categories={categories}
        activeCategoryId={activeCategoryId}
        activeGroupId={activeGroupId}
        onNavigate={onNavigate}
      />
    </aside>
  )
}