import Link from "next/link";
import { chapters } from "@/content/ebook";

type ChapterNavProps = {
  chapterId: string;
};

export function ChapterNav({ chapterId }: ChapterNavProps) {
  const index = chapters.findIndex((c) => c.id === chapterId);
  if (index < 0) return null;

  const prev = index > 0 ? chapters[index - 1] : null;
  const next = index < chapters.length - 1 ? chapters[index + 1] : null;

  return (
    <nav
      className="mt-12 flex flex-col gap-3 border-t border-[var(--border)] pt-8 sm:flex-row sm:justify-between"
      aria-label="Previous and next chapter"
    >
      {prev ? (
        <Link
          href={`#${prev.id}`}
          className="group glass-card flex flex-1 flex-col rounded-2xl px-5 py-4 transition-shadow hover:shadow-[var(--glow-sm)]"
        >
          <span className="text-xs font-semibold uppercase tracking-wider text-[var(--muted)]">
            ← Previous
          </span>
          <span className="mt-1 font-medium group-hover:text-[var(--accent)]">
            {prev.title}
          </span>
        </Link>
      ) : (
        <div className="hidden flex-1 sm:block" />
      )}
      {next ? (
        <Link
          href={`#${next.id}`}
          className="group glass-card flex flex-1 flex-col rounded-2xl px-5 py-4 text-left sm:text-right transition-shadow hover:shadow-[var(--glow-sm)]"
        >
          <span className="text-xs font-semibold uppercase tracking-wider text-[var(--muted)]">
            Next →
          </span>
          <span className="mt-1 font-medium group-hover:text-[var(--accent)]">
            {next.title}
          </span>
        </Link>
      ) : null}
    </nav>
  );
}