import React, { useState, useEffect } from 'react';
import { MathJax, MathJaxContext } from 'better-react-mathjax';

const MathMLPreview = () => {
  const [mathML, setMathML] = useState('<math xmlns="http://www.w3.org/1998/Math/MathML"><mi>x</mi><mo>=</mo><mn>5</mn></math>');

  useEffect(() => {
    // Any logic to handle input updates and preview refresh can be added here
  }, [mathML]);

  return (
    <div>
      <textarea
        value={mathML}
        onChange={(e) => setMathML(e.target.value)}
        rows={5}
        style={{ width: '100%' }}
      />
      <MathJaxContext>
        <div>
          <h3>Preview:</h3>
          <MathJax dynamic>
            <div dangerouslySetInnerHTML={{ __html: mathML }} />
          </MathJax>
        </div>
      </MathJaxContext>
    </div>
  );
};

export default MathMLPreview;