import { t } from '@/lib/i18n'
import type { DocLink, DocSection } from '@/hooks/useDocs'

interface DocsSidebarProps {
  docs: DocLink[]
  selectedDoc: DocSection
  onSelectDoc: (docId: DocSection) => void
}

export function DocsSidebar({ docs, selectedDoc, onSelectDoc }: DocsSidebarProps): JSX.Element {
  return (
    <aside className="lg:w-64 flex-shrink-0">
      <div className="bg-cyber-dark border border-neon-cyan/20 rounded-lg p-4 sticky top-4 backdrop-blur-sm">
        <h2 className="text-lg font-bold mb-4 text-neon-cyan font-mono">{t('docs.title')}</h2>
        <nav className="space-y-2">
          {docs.map((doc) => (
            <button
              key={doc.id}
              onClick={() => onSelectDoc(doc.id)}
              className={`w-full text-left px-3 py-2 rounded-lg text-sm transition-all ${
                selectedDoc === doc.id
                  ? 'bg-neon-cyan/20 text-neon-cyan font-medium border border-neon-cyan/50 shadow-glow-cyan'
                  : 'text-cyber-accent hover:bg-cyber-dark/50 hover:text-neon-cyan border border-transparent hover:border-neon-cyan/30'
              }`}
            >
              {doc.title}
            </button>
          ))}
        </nav>
      </div>
    </aside>
  )
}