import { useState, useEffect } from 'react';

// import stysheet defining style specific to this component
import '../assets/style/person.css';

/*
* define a component that uses props, props is a javascript object
*/
const Person = ( { name = 'Anonymous', age, started, delay } ) => {
   
   const [ currentAge, setCurrentAge ] = useState(age);


   useEffect( () => {
      if (started) {
         setInterval( () => setCurrentAge( previousCurrentAge => previousCurrentAge + 1 ), delay);
      }
   }, []);

   return (
      <div className="person">Here is :
         <div>name : <span>{ name }</span> </div>
         <div>age  : <span>{ currentAge } </span>  </div>
      </div>
   );
}
export default Person;