import Link from "next/link";
import { ChevronRight, Info } from "lucide-react";
import type { SidebarPageItem } from "@/lib/api";
import { pageGlyph } from "@/lib/pageGlyph";

/** 侧栏单页兄弟目录（高亮当前 slug） */
export default function SiteDocPageNav({
  pages,
  currentSlug,
  title = "文档目录",
}: {
  pages: SidebarPageItem[];
  currentSlug?: string;
  title?: string;
}) {
  if (pages.length === 0) return null;

  return (
    <section className="j13-module j13-about flex min-h-0 flex-col" aria-label={title}>
      <p className="j13-module-title mb-1 shrink-0">
        <Info size={15} style={{ color: "var(--accent)" }} /> {title}
      </p>
      <ul className="j13-about-list j13-rail-scroll">
        {pages.map((p) => {
          const Icon = pageGlyph(p.slug);
          const current = currentSlug === p.slug;
          return (
            <li key={p.id}>
              <Link
                href={`/p/${p.slug}`}
                className="j13-about-item"
                aria-current={current ? "page" : undefined}
                style={
                  current
                    ? {
                        background: "var(--accent-soft)",
                        borderColor: "var(--nav-active-line)",
                      }
                    : undefined
                }
              >
                <span className="j13-about-ico" aria-hidden="true">
                  <Icon size={15} strokeWidth={2} />
                </span>
                <span className="j13-about-body">
                  <span className="j13-about-name">{p.title}</span>
                  {p.excerpt ? <span className="j13-about-excerpt">{p.excerpt}</span> : null}
                </span>
                <ChevronRight className="j13-about-chev" size={15} aria-hidden="true" />
              </Link>
            </li>
          );
        })}
      </ul>
    </section>
  );
}