import { Suspense } from "react";
import Link from "next/link";

import { AppShell } from "@/components/app-shell";
import { GraphView } from "@/components/graph/graph-view";

export default function GraphPage() {
  return (
    <AppShell>
      <section className="space-y-6">
        <header>
          <nav className="text-[0.78rem] text-ink-muted mb-1">
            <Link href="/" className="hover:text-gold-deep">
              בית
            </Link>
            <span aria-hidden> · </span>
            <span className="text-navy">מפת הקורפוס</span>
          </nav>
          <h1 className="text-navy mb-0">מפת הקורפוס</h1>
          <p className="text-ink-muted text-sm mt-1 max-w-3xl">
            רשת הציטוטים של ספריית הפסיקה — כל נקודה היא פסיקה או נושא, וקו מציין ציטוט או שיוך.
            גודל הנקודה משקף כמה פעמים הפסיקה צוטטה. לחצו על נקודה כדי להתמקד בשכניה.
          </p>
        </header>
        <div className="h-[2px] bg-gradient-to-l from-transparent via-gold to-transparent" />
        <Suspense
          fallback={
            <div className="grid h-[560px] place-items-center text-sm text-ink-muted">
              טוען גרף…
            </div>
          }
        >
          <GraphView />
        </Suspense>
      </section>
    </AppShell>
  );
}