import React, { useState, useEffect, useMemo } from 'react';

function Counter() {
 // 1. Initialize the count to 0 and create a function to increment it
 const [count, setCount] = useState(0);

 // 2. Use the useEffect hook to log a message every time the count is updated
 useEffect(() => {
   console.log(`Count is now ${count}`);
 }, [count]);

 // 3.Fill in with the function to multiply count by and return that value
 const double = useMemo(() => count * 2, [count]);

 return (
   <div>
    {/* 4. Add  two paragraphs here displaying the current count and the double count*/ }
     <p>Current count: {count}</p>
     <p>Double of count: {double}</p>

     {/* 5. Set the onclick method to a function that adds one to the count by calling setCount*/ }
     <button onClick={() => setCount(count + 1)}>Increment</button>
   </div>
 );
}

export default Counter;