import { fmtBytes } from "@/lib/format";

/** ScientificFigure — a real research figure served from the immutable artifact store. */
export function ScientificFigure({
  src,
  path,
  bytes,
  index,
  vector,
}: {
  src: string;
  path: string;
  bytes: number;
  index: number;
  vector?: { href: string; bytes: number };
}) {
  const name = path.replace(/^results\/figures\//, "");
  return (
    <figure className="surface overflow-hidden">
      <a
        href={src}
        className="block bg-white p-3"
        target="_blank"
        rel="noopener noreferrer"
        aria-label={`Open figure ${index}: ${name}`}
      >
        {/* biome-ignore lint/performance/noImgElement: artifact images are served immutable from this origin */}
        <img
          src={src}
          alt={`Figure ${index}: ${name}`}
          className="mx-auto max-h-[28rem] w-auto"
          loading="lazy"
          decoding="async"
        />
      </a>
      <figcaption className="flex flex-wrap items-center justify-between gap-2 border-t px-3 py-2 text-xs hairline">
        <span>
          <span className="font-medium">Figure {index}.</span> <span className="muted font-mono">{name}</span>
        </span>
        <span className="subtle">
          {fmtBytes(bytes)}
          {vector && (
            <>
              {" · "}
              <a href={`${vector.href}?download=1`}>vector PDF ({fmtBytes(vector.bytes)})</a>
            </>
          )}
        </span>
      </figcaption>
    </figure>
  );
}