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-white rounded-lg shadow-sm p-4 sticky top-4">
        <h2 className="text-lg font-bold mb-4">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-colors ${
                selectedDoc === doc.id
                  ? 'bg-blue-100 text-blue-700 font-medium'
                  : 'text-gray-600 hover:bg-gray-100'
              }`}
            >
              {doc.title}
            </button>
          ))}
        </nav>
      </div>
    </aside>
  )
}

