import { useEffect, useRef } from "react";

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

interface EquationDisplayProps {
  equation: string;
  rationale?: string;
  className?: string;
}

export function EquationDisplay({
  equation,
  rationale,
  className,
}: EquationDisplayProps): JSX.Element {
  const targetRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (targetRef.current) {
      renderEquationInto(targetRef.current, equation);
    }
  }, [equation]);

  return (
    <div className={className ?? "panel-muted"}>
      <div className="heading-eyebrow mb-2">Current hypothesis</div>
      <div ref={targetRef} className="min-h-[44px] text-textPrimary" />
      {rationale ? (
        <p className="mt-3 text-sm text-textMuted">
          <span className="font-medium text-textPrimary">Rationale:</span> {rationale}
        </p>
      ) : null}
    </div>
  );
}