import { useState, useRef } from 'react'
import './App.css'
import PeopleTable from './components/PeopleTable';
import PersonMaker from './components/PersonMaker';

function App() {
  const [people, setPeople] = useState([]);
  const [ageLimit,setAgeLimit] = useState(18);
  const ageRef = useRef();

  function addPerson(p) {
    setPeople([...people,p]);
  }
  
  return (
    <>
     <input type="text" ref={ageRef}/><button onClick={()=>setAgeLimit(Number(ageRef.current.value))}>Set Age Limit</button>
     <PeopleTable people={people} minAge={ageLimit} />
     <PersonMaker addPerson={addPerson} />
    </>
  )
}

export default App