import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import './style.css';
import './fonts/Bitter-Regular.woff';

import Timer from './components/Timer';

interface Solution {
  result: string;
  author: string;
}

const App: React.FC = () => {
  const [author, setAuthor] = useState<string>('anonymous');
  const [solutions, setSolutions] = useState<Solution[]>([]);

  const registerResult = (result: string) => {
    setSolutions([{ author, result }, ...solutions]);
  }

  return (
    <>
      <h2>Timer</h2>
      <Timer registerResult={registerResult} />

      <h2>Results</h2>
      <ul>
        {solutions.map(solution => (
          <li>
            {solution.result} by {solution.author}
          </li>
        ))}
      </ul>
    </>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));