"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import {
  BookOpen,
  Layers,
  ArrowRightLeft,
  Database,
  FileCode,
  Settings,
  Server,
} from "lucide-react";

const sections = [
  {
    title: "Getting Started",
    items: [{ title: "Overview", href: "/docs", icon: BookOpen }],
  },
  {
    title: "Architecture",
    items: [
      { title: "System Overview", href: "/docs/architecture", icon: Layers },
      {
        title: "Data Flow",
        href: "/docs/architecture/data-flow",
        icon: ArrowRightLeft,
      },
      {
        title: "Database Schema",
        href: "/docs/architecture/database",
        icon: Database,
      },
    ],
  },
  {
    title: "API",
    items: [
      { title: "API Reference", href: "/docs/api", icon: FileCode },
      { title: "Configuration", href: "/docs/configuration", icon: Settings },
    ],
  },
  {
    title: "Deployment",
    items: [
      { title: "Self-Hosting", href: "/docs/self-hosting", icon: Server },
    ],
  },
];

export function DocsSidebar() {
  const pathname = usePathname();

  return (
    <nav className="space-y-6">
      {sections.map((section) => (
        <div key={section.title}>
          <h4 className="mb-2 text-sm font-semibold tracking-tight text-muted-foreground">
            {section.title}
          </h4>
          <ul className="space-y-1">
            {section.items.map((item) => {
              const isActive = pathname === item.href;
              return (
                <li key={item.href}>
                  <Link
                    href={item.href}
                    className={`flex items-center gap-2 rounded-md px-3 py-2 text-sm transition-colors hover:bg-muted ${
                      isActive
                        ? "bg-muted font-medium text-foreground"
                        : "text-muted-foreground"
                    }`}
                  >
                    <item.icon className="size-4" />
                    {item.title}
                  </Link>
                </li>
              );
            })}
          </ul>
        </div>
      ))}
    </nav>
  );
}