import React, { useState } from "react";
const FeedbackItem = ({title, index}) => {
    const [upvote, setUpvote] = useState(0)
    const [downvote, setDownvote] = useState(0)

    const handleUpvote = () => {
      setUpvote(prevUpvote => prevUpvote + 1)
    }
    const handleDownvote = () => {
      setDownvote(prevDownvote => prevDownvote + 1)
    }

    return (
    <div className="pa-10 w-300 card">
          <h2>{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}>
              👍 Upvote
            </button>
            <button className="py-10 px-15 danger" data-testid={`downvote-btn-${index}`} onClick={handleDownvote}>
              👎 Downvote
            </button>
          </div>
          <p className="my-10 mx-0" data-testid={`upvote-count-${index}`}>
            Upvotes: <strong>{upvote}</strong>
          </p>
          <p className="my-10 mx-0" data-testid={`downvote-count-${index}`}>
            Downvotes: <strong>{downvote}</strong>
          </p>
        </div>
        )
  }

const FeedbackSystem = () => {
  return (
    <div className="my-0 mx-auto text-center w-mx-1200">
      <div className="flex wrap justify-content-center mt-30 gap-30">
        <FeedbackItem title="Readability" index={0} />
        <FeedbackItem title="Performance" index={1}/>
        <FeedbackItem title="Security" index={2}/>
        <FeedbackItem title="Documentation" index={3}/>
        <FeedbackItem title="Testing" index={4}/>
      </div>
    </div>
  );
};

export default FeedbackSystem;