import logo from './logo.svg';
import './App.css';
import { useEffect, useState } from 'react';

function App() {

  const [pokes,setPokes] = useState([]);
  const [pokeIdx,setPokeIdx] = useState(0);

  useEffect( () => {
    let tmpPokes = [];
    tmpPokes.push({name: "Bulbasor", description: "small and cute but ferocious"});
    tmpPokes.push({name: "Squirtle", description: "water poke"});
    setPokes(tmpPokes);
  }, [])

  // useEffect( () => {

  // })

  // const nextButton = () => {
  //   setPokeIdx(pokeIdx+1);
  // }

  return (
    <div className="App">
      <div className="window">
        <div className="chooser">
          <select>
            {pokes.map( x => {
                return <option> {x.name} </option>
                }) }
          </select>
        </div>
        <div>
        </div>
        <div className='pokeTitle'>
          {pokes[pokeIdx].name}
        </div>
        <div className='pokeDescription'>
          {pokes[pokeIdx].description}
        </div>
        {/* <input type="button" onClick={nextButton} > Next Poke </input> */}
      </div>
    </div>
  );
}

export default App;