'use client'

/**
 * Sidebar table of contents for navigating audit documentation sections.
 */

import { SECTIONS } from '../constants'

interface TableOfContentsProps {
  activeSection: string
  onScrollToSection: (sectionId: string) => void
}

export function TableOfContents({ activeSection, onScrollToSection }: TableOfContentsProps) {
  return (
    <aside className="w-64 flex-shrink-0 border-r border-slate-200 bg-slate-50 overflow-y-auto fixed left-64 top-16 bottom-0 z-20">
      <div className="p-4">
        <h2 className="text-sm font-semibold text-slate-900 uppercase tracking-wider mb-4">
          Inhaltsverzeichnis
        </h2>
        <nav className="space-y-0.5">
          {SECTIONS.map((section) => (
            <button
              key={section.id}
              onClick={() => onScrollToSection(section.id)}
              className={`w-full text-left px-2 py-1.5 text-sm rounded transition-colors ${
                section.level === 2 ? 'font-medium' : 'ml-3 text-xs'
              } ${
                activeSection === section.id
                  ? 'bg-primary-100 text-primary-700'
                  : 'text-slate-600 hover:bg-slate-200 hover:text-slate-900'
              }`}
            >
              {section.id.includes('-') ? '' : `${section.id}. `}{section.title}
            </button>
          ))}
        </nav>
      </div>
    </aside>
  )
}