import React, { useState } from "react";

const FeedbackSystem = () => {
  const aspects = ["Readability", "Performance", "Security", "Documentation", "Testing"];
  const [upVotes, setUpVotes] = useState({
    Readability: 0,
    Performance: 0,
    Security: 0,
    Documentation: 0,
    Testing: 0
  });

  const [downVotes, setDownVotes] = useState({
    Readability: 0,
    Performance: 0,
    Security: 0,
    Documentation: 0,
    Testing: 0
  });

  const handleUpvotes = (aspect) => {
    setUpVotes((prev) => ({...prev, [aspect]: prev[aspect] + 1}))
  }
  const handleDownVotes = (aspect) => {
    setDownVotes((prev) => ({...prev, [aspect]: prev[aspect]+1}));
  }

  return (
    <div className="my-0 mx-auto text-center w-mx-1200">
      <div className="flex wrap justify-content-center mt-30 gap-30">
        {aspects.map((aspect,index) => (
        <div className="pa-10 w-300 card" key={index}>
          <h2>{aspect}</h2>
          <div className="flex my-30 mx-0 justify-content-around">
            <button className="py-10 px-15" data-testid={`upvote-btn-${index}`}
 onClick={() => handleUpvotes(aspect)}>
              👍 Upvote
            </button>
            <button className="py-10 px-15 danger" data-testid={`downvote-btn-${index}`} onClick={() => handleDownVotes(aspect)}>
              👎 Downvote
            </button>
          </div>
          <p className="my-10 mx-0" data-testid={`upvote-count-${index}`}>
            Upvotes: <strong>{upVotes[aspect]}</strong>
          </p>
          <p className="my-10 mx-0" data-testid={`downvote-count-${index}`}>
            Downvotes: <strong>{downVotes[aspect]}</strong>
          </p>
        </div>
        ))}
      </div>
    </div>
  );
};

export default FeedbackSystem;