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

import useLocalStorage from './hooks/useLocalStorage';
import Timer from './components/Timer';

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

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

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

  const handleRemoveSolution = (index: number) => {
    setSolutions(solutions.filter((_, i) => i !== index));
  }

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

      <h2>Results</h2>
      <ul>
        {solutions.map((solution, index) => (
          <li>
            {solution.result} by {solution.author} &nbsp;
            <button onClick={() => handleRemoveSolution(index)}>remove</button>
          </li>
        ))}
      </ul>
    </>
  );
};

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