/** Docs sidebar navigation — highlights the active page via usePathname. */
'use client'

import { usePathname } from 'next/navigation'
import Link from 'next/link'

/** Renders the docs sidebar with active-link highlighting for the current route. */
export default function DocsSidebar() {
  const pathname = usePathname()

  return (
    <aside className="sidebar reveal r2">
      <div className="sidebar-section">
        <div className="sidebar-heading">Getting started</div>
        <nav>
          <Link href="/docs" className={pathname === '/docs' ? 'active' : ''}>
            Overview
          </Link>
          <Link href="/docs/quickstart" className={pathname === '/docs/quickstart' ? 'active' : ''}>
            Quickstart
          </Link>
        </nav>
      </div>
      <div className="sidebar-section">
        <div className="sidebar-heading">Reference</div>
        <nav>
          <Link href="/docs/configuration" className={pathname === '/docs/configuration' ? 'active' : ''}>
            Configuration
          </Link>
          <Link href="/docs/commands" className={pathname === '/docs/commands' ? 'active' : ''}>
            Bot commands
          </Link>
          <Link href="/docs/cli" className={pathname === '/docs/cli' ? 'active' : ''}>
            CLI
          </Link>
        </nav>
      </div>
      <div className="sidebar-section">
        <div className="sidebar-heading">Guides</div>
        <nav>
          <Link href="/docs/pipeline" className={pathname === '/docs/pipeline' ? 'active' : ''}>
            Pipeline stages
          </Link>
          <Link href="/docs/transports" className={pathname === '/docs/transports' ? 'active' : ''}>
            Chat transports
          </Link>
        </nav>
      </div>
    </aside>
  )
}