import React, { useState } from "react";

const FeedbackSystem = () => {
  const[feedbacks,setFeedbacks] = useState(
    [
      {title:'Readability',upvote:0,downvote:0},
      {title:'Performance',upvote:0,downvote:0},
      {title:'Security',upvote:0,downvote:0},
      {title:'Documentation',upvote:0,downvote:0},
      {title:'Testing',upvote:0,downvote:0}
    ]
  )

  const handleUpvote = (index) => {
  const updatedFeedbacks = feedbacks.map((item, i) =>
    i === index ? { ...item, upvote: item.upvote + 1 } : item
  );
  setFeedbacks(updatedFeedbacks);
};

const handleDownvote = (index) => {
  const updatedFeedbacks = feedbacks.map((item, i) =>
    i === index ? { ...item, downvote: item.downvote + 1 } : item
  );
  setFeedbacks(updatedFeedbacks);
};
  return (
    <div className="my-0 mx-auto text-center w-mx-1200">
      <div className="flex wrap justify-content-center mt-30 gap-30">
        {
          feedbacks.length>0?feedbacks.map((item,index)=>
            <div className="pa-10 w-300 card" key={index}>
          <h2>{item.title}</h2>
          <div className="flex my-30 mx-0 justify-content-around">
            <button className="py-10 px-15" data-testid={`upvote-btn-${index}`}
            onClick={()=>{handleUpvote(index)}}
            >
              👍 Upvote
            </button>
            <button className="py-10 px-15 danger" data-testid={`downvote-btn-${index}`}
            onClick={()=>{handleDownvote(index)}}
            >
              👎 Downvote
            </button>
          </div>
          <p className="my-10 mx-0" data-testid={`upvote-count-${index}`}>
            Upvotes: <strong>{item.upvote}</strong>
          </p>
          <p className="my-10 mx-0" data-testid={`downvote-count-${index}`}>
            Downvotes: <strong>{item.downvote}</strong>
          </p>
        </div>
          ):''
        }
      </div>
    </div>
  );
};

export default FeedbackSystem;