import React, { useState } from 'react'

const App = () => {
  // save clicks of each button to its own state
  const [good, setGood] = useState(0)
  const [neutral, setNeutral] = useState(0)
  const [bad, setBad] = useState(0)

  
  const Statistics = (props) => {
      const [good, neutral, bad] = props.data
      const all = good + bad + neutral
      const avg = (all !== 0) ? (good - bad) / all : 0 
      const positive =  (all !== 0) ? good/all*100 : "NA"

      return (
        <div>
          <h1>Statistic</h1>
          <p>Good: {good}</p>
          <p>Neutral: {neutral}</p>
          <p>Bad: {bad}</p>
          <p>All: {all}</p>
          <p>Average: {avg} </p>
          <p>Positive: {positive} %</p>
        </div>
      )
  }

  return (
    <div>
      <h1>Give feedback</h1>
      
      <button onClick={() => setGood(good + 1)}>good</button>
      <button onClick={() => setNeutral(neutral + 1)}>neutral</button>
      <button onClick={() => setBad(bad + 1)}>bad</button>

      <Statistics data={[good, neutral, bad]}/>
     
    </div>
  )
}

export default App