import { Button, Card } from './ui'
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): React.ReactElement {
  return (
    <aside className="lg:w-64 flex-shrink-0">
      <Card variant="default" className="bg-cyber-dark 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}
              type="button"
              variant={selectedDoc === doc.id ? 'primary' : 'ghost'}
              onClick={() => onSelectDoc(doc.id)}
              className="w-full text-left justify-start"
            >
              {doc.title}
            </Button>
          ))}
        </nav>
      </Card>
    </aside>
  )
}
