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

/** 侧栏单页兄弟目录（高亮当前 slug）；标题栏与首页「关于本站」一致 */
export default function SiteDocPageNav({
  pages,
  currentSlug,
  title = "文档目录",
  canManage,
}: {
  pages: SidebarPageItem[];
  currentSlug?: string;
  title?: string;
  canManage?: boolean;
}) {
  if (pages.length === 0 && !canManage) return null;

  return (
    <section className="j13-module j13-about flex min-h-0 flex-col" aria-label={title}>
      <AboutSiteHeader title={title} canManage={canManage} />
      {pages.length === 0 ? (
        <p className="meta mt-2 px-0.5">暂无介绍</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>
  );
}