import React, {useState} from "react";


const ReviewFeedback = ( {name, id} ) => {


  const [upVotes, setUpVotes] = useState(0);
  const [downVotes, setDownVotes] = useState(0);
  
  const upVoteBtnClick = () => {

    setUpVotes(upVotes + 1);

  };


  const downVoteBtnClick = () => {

    setDownVotes(downVotes + 1);

  };


  return (
    <div className="my-0 mx-auto text-center w-mx-1200 card-custom">
      <div className="flex wrap justify-content-center mt-30 gap-30">
        <div className="pa-10 w-300 card">
          <h2>{name}</h2>
          <div className="flex my-30 mx-0 justify-content-around">
            <button className="py-10 px-15" data-testid={"upvote-btn-" + id} onClick={upVoteBtnClick}>
              👍 Upvote
            </button>
            <button className="py-10 px-15 danger" data-testid={"downvote-btn-" + id} onClick={downVoteBtnClick}>
              👎 Downvote
            </button>
          </div>
          <p className="my-10 mx-0" data-testid={"upvote-count-" + id}>
            Upvotes: <strong>{upVotes}</strong>
          </p>
          <p className="my-10 mx-0" data-testid={"downvote-count-" + id}>
            Downvotes: <strong>{downVotes}</strong>
          </p>
        </div>
      </div>
    </div>
  );


};



export default ReviewFeedback;