import React, { useState } from "react";

const FeedbackSystem = () => {
  return (
    <div>
  <FeedbackSystem1 name ="Readability"/>
   <FeedbackSystem1 name ="Performance"/>
    <FeedbackSystem1 name ="Security"/>
     <FeedbackSystem1 name ="Documentation"/>
     <FeedbackSystem1 name ="Testing"/>
     </div>
  )
}



const FeedbackSystem1 = (props) => {
  const [downVote, setDownVote] = useState(0);
  const [upVote, setUpVote] = useState(0);

  const handlebutton = (flag) =>{
if(flag){
  setUpVote(upVote+1);

} else {
  setDownVote(downVote+1);
}
}
  
  return (
    <div className="my-0 mx-auto text-center w-mx-1200">
      <div className="flex wrap justify-content-center mt-30 gap-30">
        <div className="pa-10 w-300 card">
          <h2>{props.name}</h2>
          <div className="flex my-30 mx-0 justify-content-around">
            <button className="py-10 px-15" data-testid="upvote-btn-0" onClick={()=>handlebutton(true)}>
              👍 Upvote
            </button>
            <button className="py-10 px-15 danger" data-testid="downvote-btn-0" onClick={()=>handlebutton(false)}>
              👎 Downvote
            </button>
          </div>
          <p className="my-10 mx-0" data-testid="upvote-count-0">
            Upvotes: <strong>{upVote}</strong>
          </p>
          <p className="my-10 mx-0" data-testid="downvote-count-0">
            Downvotes: <strong>{downVote}</strong>
          </p>
        </div>
      </div>
    </div>
  );
};

export default FeedbackSystem;