"use client"

import { useState } from "react"
import { Sidebar } from "@/components/cli-docs/sidebar"
import { Overview } from "@/components/cli-docs/overview"
import { Installation } from "@/components/cli-docs/installation"
import { Commands } from "@/components/cli-docs/commands"
import { Architecture } from "@/components/cli-docs/architecture"
import { Workflows } from "@/components/cli-docs/workflows"
import { Testing } from "@/components/cli-docs/testing"
import { AIIntegration } from "@/components/cli-docs/ai-integration"
import { Examples } from "@/components/cli-docs/examples"
import { SearchProvider } from "@/components/cli-docs/search-provider"
import docsData from "@/data/ruch-cli-docs.json"

export default function CLIDocsPage() {
  const [activeSection, setActiveSection] = useState("overview")

  const renderSection = () => {
    switch (activeSection) {
      case "overview":
        return <Overview data={docsData.overview} />
      case "installation":
        return <Installation data={docsData.installation} />
      case "commands":
        return <Commands data={docsData.commands} />
      case "architecture":
        return <Architecture data={docsData.architectureLayers} />
      case "workflows":
        return <Workflows data={docsData.workflows} />
      case "ai-integration":
        return <AIIntegration data={docsData.aiIntegration} />
      case "examples":
        return <Examples data={docsData.examples} />
      default:
        return <Overview data={docsData.overview} />
    }
  }

  return (
    <SearchProvider>
      <div className="min-h-screen bg-gray-50">
        <div className="flex">
          <Sidebar activeSection={activeSection} onSectionChange={setActiveSection} projectData={docsData.project} />
          <main className="flex-1 lg:ml-64">
            <div className="max-w-4xl mx-auto px-4 py-8">{renderSection()}</div>
          </main>
        </div>
      </div>
    </SearchProvider>
  )
}