// User class component
class User extends React.Component {
  constructor(props) {
    super(props);

    // starting values for component's state
    this.state = {
      rating: 0,
    };
  }

  /*
   * event handlers: change the state
   */
  handleLike = () => {
    this.setState({ rating: 1 });
  };

  handleDislike = () => {
    this.setState({ rating: -1 });
  };

  // render the JSX structure
  render() {
    return (
      <div>
        <img
          src={`https://practicum-content.s3.us-west-1.amazonaws.com/web-code/react/moved_${this.props.id}.png`}
          width="75"
        />
        <p>{this.props.name}</p>
        <div className="rating">
          <button onClick={this.handleLike}>👍</button>
          {this.state.rating}
          <button onClick={this.handleDislike}>👎</button>
        </div>
      </div>
    );
  }
}

// the main app code
ReactDOM.render(
  <>
    <h2>My Imaginary Friends:</h2>
    <User id="1" name="Gregory" />
    <User id="2" name="James" />
    <User id="3" name="Allison" />
  </>,
  document.querySelector("#root")
);