import { useMemo } from "react";
import katex from "katex";
import "katex/dist/katex.min.css";
import type { Equation } from "@plate-lab/core";

/** Renders a method's equations with their captions. */
export function EquationsView({ equations }: { equations: Equation[] }) {
  const html = useMemo(
    () => equations.map((e) => katex.renderToString(e.tex, { displayMode: true, throwOnError: false })),
    [equations],
  );
  return (
    <div className="pl-equations">
      {equations.map((e, i) => (
        <div className="pl-equation" key={i}>
          <div dangerouslySetInnerHTML={{ __html: html[i] }} />
          <div className="pl-equation-caption">{e.caption}</div>
        </div>
      ))}
    </div>
  );
}