import { ListTree } from "lucide-react";

type TocItem = {
  title: string;
  href: string;
};

type TechDocTocProps = {
  toc: readonly TocItem[];
};

export function TechDocToc({ toc }: TechDocTocProps) {
  return (
    <div className="mt-8 w-full lg:sticky lg:top-8 lg:w-80">
      <nav
        className="tech-doc-toc w-full rounded-[1.25rem] border border-white/10 bg-[#090915]/90 p-4 shadow-2xl shadow-black/20"
      >
        <div className="mb-3 flex items-center gap-2 font-mono text-xs uppercase tracking-[0.18em] text-cyan-200">
          <ListTree className="h-4 w-4" />
          目录
        </div>
        <div className="max-h-[calc(100dvh-8rem)] space-y-1 overflow-y-auto pr-1">
          {toc.map((item, index) => (
            <a
              key={item.href}
              href={item.href}
              className="group flex items-start gap-3 rounded-xl px-3 py-2 text-sm text-white/58 transition hover:bg-cyan-300/[0.08] hover:text-cyan-100"
            >
              <span className="block w-7 shrink-0 font-mono text-xs leading-5 text-fuchsia-200/70 transition group-hover:text-fuchsia-100">
                {String(index + 1).padStart(2, "0")}
              </span>
              <span className="block flex-1 leading-5">{item.title}</span>
            </a>
          ))}
        </div>
      </nav>
    </div>
  );
}
