import { notFound } from "next/navigation";
import Link from "next/link";
import { Shell } from "@/components/Shell";
import { Markdown } from "@/components/Markdown";
import { getChapters } from "@/lib/handbook";

export default async function ChapterPage({ params }: { params: Promise<{ chapter: string }> }) {
  const { chapter } = await params;
  const chapters = await getChapters();
  const idx = chapters.findIndex((c) => c.slug === chapter);
  if (idx < 0) notFound();
  const c = chapters[idx];
  const prev = chapters[idx - 1];
  const next = chapters[idx + 1];
  return (
    <Shell>
      <div className="mx-auto max-w-7xl px-5 pt-12 pb-16 grid gap-12 lg:grid-cols-[220px_1fr]">
        <nav className="lg:sticky lg:top-20 self-start">
          <p className="eyebrow mb-3">Handbook</p>
          <ul className="space-y-1">
            {chapters.map((x) => <li key={x.slug}><Link href={`/handbook/${x.slug}`} className={`block rounded-lg px-3 py-1.5 text-sm ${x.slug === c.slug ? "bg-ink text-white" : "hover:bg-ink/5"}`}>{x.title}</Link></li>)}
          </ul>
        </nav>
        <article className="max-w-3xl">
          <Markdown>{c.body}</Markdown>
          <div className="mt-14 flex justify-between border-t border-line pt-6 text-sm">
            {prev ? <Link href={`/handbook/${prev.slug}`} className="hover:text-soul">← {prev.title}</Link> : <span />}
            {next ? <Link href={`/handbook/${next.slug}`} className="hover:text-soul">{next.title} →</Link> : <span />}
          </div>
        </article>
      </div>
    </Shell>
  );
}