// KaTeX wrappers for the tutorial. M renders inline math, Eq a display
// equation with an optional right-aligned tag, conventionally the equation
// number of Samejima (2021) so the tutorial can be read beside the paper.

import katex from 'katex';
import 'katex/dist/katex.min.css';
import { useMemo } from 'react';

export function M({ children }: { children: string }) {
  const html = useMemo(
    () => katex.renderToString(children, { throwOnError: false }),
    [children],
  );
  return <span dangerouslySetInnerHTML={{ __html: html }} />;
}

export function Eq({ children, tag }: { children: string; tag?: string }) {
  const html = useMemo(
    () => katex.renderToString(children, { throwOnError: false, displayMode: true }),
    [children],
  );
  return (
    <div className="tut-eq">
      <div className="tut-eq-body" dangerouslySetInnerHTML={{ __html: html }} />
      {tag && <div className="tut-eq-tag">{tag}</div>}
    </div>
  );
}