import { useState, useEffect } from 'react'


function App() {

  // const [splat, setSplat] = useState(null);
  const [randomNum, setRandomNum] = useState(null);
  const [rng, setRng] = useState(null)

  useEffect(() => {
    createModule().then((module) => {
      setRng(new module.mt19937(5489))
    })
  }, []);

  const generateRandom = () => {
    const num = rng.generate();
    setRandomNum(num);
    console.log(num)
  };


  return (
    <>
      <div className='flex flex-row justify-center'>
        <span className='text-2xl font-bold'>🫟 {rng !=null ? rng.getName() : "none"}</span>
      </div>
      <div>
        {(rng==null) ? (
          <div className='flex flex-row justify-center'>
            <span className='text-md'>Loading...</span>
          </div>
        ) : (
          <div>
            <div className='flex flex-row justify-center'>
              <span>{randomNum ? randomNum : "Generate a number below"}</span>
            </div>
            <div className='flex flex-row justify-center'>
              <button onClick={() => {generateRandom()}}>Generate</button>
            </div>
          </div>
        )}
      </div>
    </>
  )
}

export default App