import Link from "next/link";
import type { ReactNode } from "react";

export function EmptyState({ title, children }: { title: string; children?: ReactNode }) {
  return (
    <div className="surface-muted px-6 py-12 text-center">
      <p className="title-3">{title}</p>
      {children && <div className="muted mt-2 text-sm">{children}</div>}
    </div>
  );
}

/** EmptyResearchState — the library before the first paper passes every gate. Honest, no placeholders. */
export function EmptyResearchState({
  title = "No working papers have been released yet.",
  showPipeline = true,
}: {
  title?: string;
  showPipeline?: boolean;
}) {
  return (
    <div className="surface-muted paper-ruled relative overflow-hidden px-6 py-14 text-center sm:py-20">
      <div className="mx-auto max-w-md">
        <div
          aria-hidden="true"
          className="mx-auto mb-5 grid h-12 w-12 place-items-center rounded-full border text-lg"
          style={{
            borderColor: "var(--line-strong)",
            background: "var(--bg-elev)",
            fontFamily: "var(--font-serif)",
          }}
        >
          ∅
        </div>
        <p className="title-2">{title}</p>
        <p className="muted mt-3 text-sm leading-relaxed">
          A paper appears here only after a run has executed its research, passed an automated critical review
          and cleared every deterministic quality gate. Nothing is seeded, mocked or back-dated.
        </p>
        {showPipeline && (
          <Link href="/methodology" className="btn mt-6">
            How papers are produced
          </Link>
        )}
      </div>
    </div>
  );
}