import React from 'react'

type DocSection = 'user-guide' | 'faq' | 'publishing' | 'payment'

interface DocLink {
  id: DocSection
  title: string
  file: string
}

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

export function DocsSidebar({ docs, selectedDoc, onSelectDoc }: DocsSidebarProps) {
  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">Documentation</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>
  )
}