text: import "./App.css";
  import { Component } from "react";
  import Section from "./components/Section";
  import FeedbackOptions from "./components/FeedbackOptions";
  import Statistics from "./components/Statistics";
  import Notification from "./components/Notification";
  
  class App extends Component {
    state = {
      good: 0,
      neutral: 0,
      bad: 0,
    };
  
    onLeaveFeedback = (option) => {
      this.setState((prevState) => {
        return { [option]: prevState[option] + 1 };
      });
    };
    countTotalFeedback = () => {
      const values = Object.values(this.state);
      return values.reduce((acc, el) => acc + el, 0);
    };
    countPositiveFeedbackPercentage = () => {
      return Math.round((this.state.good / this.countTotalFeedback()) * 100);
    };
    render() {
      return (
        <>
          <Section title={`Please leave your feedback`}>
            <FeedbackOptions
              options={Object.keys(this.state)}
              onLeaveFeedback={this.onLeaveFeedback}
            />
          </Section>
          {this.countTotalFeedback() ? (
            <Section title={`Statistics`}>
              <Statistics
                good={this.state.good}
                neutral={this.state.neutral}
                bad={this.state.bad}
                total={this.countTotalFeedback()}
                positivePercentage={this.countPositiveFeedbackPercentage()}
              />
            </Section>
          ) : (
            <Notification message="No feedback given" />
          )}
        </>
      );
    }
  }
  
  export default App;
  