body {
  margin-top: 60px;
  font-family: 'Montserrat', sans-serif;
  text-align: center;
}

div {
  margin-top: 45px;
}


.mood {
  font-size: 60px;
  background: orange;
  border-radius: 10px;
  margin: 10px;
  padding: 10px;
  
}

.mood:hover {
  background: tomato;
}


p {
  margin: 4em;
  font-size: 25px;
}

const {useState, useEffect} = React;

function App () {
  
  const [ mood, setMood] = useState("");
  const [ message, setMessage] = useState("");
  
  const moods  = [
               
                  {mood: "happy", message: "Share your joy with others  💃 🎉🕺", emoticon: "😁"}, 
                  {mood: "angry", message:"Relax...just breathe 🧘🏽‍♀️🧘🏻‍♂️", emoticon: "😠"},
                  {mood: "sad",   message:"Listen to your favorite song  🎧 🎼", emoticon: "😢" },
                  {mood:"bored", message: "Read a book, Go for a walk 🏃🏻‍♀️📕  📖", emoticon: "😒"}]

  
  const handleMood = (e) =>{
    setMood(e.target.value);
  }
  
  useEffect(() => {
   if (mood.length > 0) {
    setMessage(moods.filter( item => item.mood === mood)[0].message)  
    }
  }, [mood]);
  
  return(
   <div>
    <h1>What is your mood today?</h1>  
      <div>
         {moods.map( item =>
           <button onClick={handleMood} value={item.mood} className="mood">{item.emoticon} </button>
          )}
      </div>
      <p> {message} </p>
    </div>
  )
}



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