import React, { useState } from "react";
import MathJax from "react-mathjax";

const MathInput: React.FC = () => {
  const [input, setInput] = useState<string>(
    "a^2+b^2=c^2 (x+a)^n=x=(-b±√(b^2-4ac))/2a ∑_(k=0)^n▒〖(n¦k) x^k a^(n-k) 〗",
  );

  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const formattedInput = event.target.value.replace("_", " _  ");
    console.log(event.target.value);

    setInput(formattedInput);
  };

  return (
    <MathJax.Provider>
      <div>
        <input
          type="text"
          id="mathInput"
          value={input}
          onChange={handleChange}
        />
        <div>
          <MathJax.Node formula={input} />
        </div>
      </div>
    </MathJax.Provider>
  );
};

export default MathInput;