geointel/frontend/src/components/shell/WorkbenchNavigation.tsx

import {
  Activity,
  Bot,
  Database,
  Download,
  Map,
  ScanSearch,
  Settings,
  ShieldCheck,
  type LucideIcon,
} from 'lucide-react'
import type { WorkspaceKey } from '../overview/OverviewWorkspace'
import { GeoIntelMark } from '../brand/GeoIntelBrand'

export interface WorkspaceNavigationItem {
  key: WorkspaceKey
  label: string
  navigationLabel?: string
  description: string
}

export interface WorkspaceNavigationGroup {
  label: string
  keys: WorkspaceKey[]
}

interface WorkbenchNavigationProps {
  activeWorkspace: WorkspaceKey
  groups: WorkspaceNavigationGroup[]
  items: WorkspaceNavigationItem[]
  onSelect: (workspace: WorkspaceKey) => void
}

const workspaceIcons: Record<WorkspaceKey, LucideIcon> = {
  map: Map,
  data: Database,
  assistant: Bot,
  analysis: ShieldCheck,
  ai: ScanSearch,
  exports: Download,
  overview: Activity,
  system: Settings,
}

export function WorkbenchNavigation({
  activeWorkspace,
  groups,
  items,
  onSelect,
}: WorkbenchNavigationProps): JSX.Element {
  return (
    <aside className="workbench-sidebar" aria-label="Navigatie van de werkruimte">
      <div className="sidebar-brand" aria-label="GeoIntel">
        <GeoIntelMark className="brand-mark" />
        <span className="sidebar-brand-copy">
          <strong>GeoIntel</strong>
        </span>
      </div>

      <nav aria-label="Hoofdonderdelen">
        {groups.map((group) => (
          <div className="nav-group" key={group.label}>
            <p className="nav-section-label">{group.label}</p>
            {group.keys.map((key) => {
              const item = items.find((candidate) => candidate.key === key)
              if (!item) {
                return null
              }
              const Icon = workspaceIcons[item.key]
              return (
                <button
                  key={item.key}
                  type="button"
                  className={item.key === activeWorkspace ? 'nav-item nav-item-active' : 'nav-item'}
                  onClick={() => onSelect(item.key)}
                  aria-current={item.key === activeWorkspace ? 'page' : undefined}
                  aria-label={`Open ${item.label}: ${item.description}`}
                  title={item.description}
                  data-testid={`workspace-nav-${item.key}`}
                >
                  <Icon className="nav-item-icon" aria-hidden="true" strokeWidth={1.8} />
                  <span>{item.navigationLabel ?? item.label}</span>
                </button>
              )
            })}
          </div>
        ))}
      </nav>
    </aside>
  )
}