import React, { useMemo } from 'react';
import katex from 'katex';

interface MathFormulaProps {
  math: string;
  displayMode?: boolean;
  className?: string;
}

export const MathFormula: React.FC<MathFormulaProps> = ({
  math,
  displayMode = true,
  className = '',
}) => {
  const renderedHtml = useMemo(() => {
    try {
      return katex.renderToString(math, {
        displayMode,
        throwOnError: false,
        output: 'htmlAndMathml',
      });
    } catch (err) {
      console.warn('KaTeX rendering error:', err);
      return null;
    }
  }, [math, displayMode]);

  if (!renderedHtml) {
    return (
      <code className={`font-mono text-xs ${className}`}>
        {math}
      </code>
    );
  }

  return (
    <div
      className={`katex-math-wrapper overflow-x-auto ${displayMode ? 'text-center my-1.5 py-1' : 'inline-block'} ${className}`}
      dangerouslySetInnerHTML={{ __html: renderedHtml }}
    />
  );
};