import React, { useState } from "react";

const FeedbackSystem = () => {
    const [feedbackItems, setFeedBackItems] = useState([
        { id: 1, title: "Readability", upvote_count: 0, downvote_count: 0 },
        { id: 2, title: "Performance", upvote_count: 0, downvote_count: 0 },
        { id: 3, title: "Security", upvote_count: 0, downvote_count: 0 },
        { id: 4, title: "Documentation", upvote_count: 0, downvote_count: 0 },
        { id: 5, title: "Testing", upvote_count: 0, downvote_count: 0 },
    ])

    const handleVote = (count_key, index) => {
        setFeedBackItems(items => {
            const prevCount = items[index][count_key]
            items[index][count_key] = prevCount + 1
            return [...items]
        })
    }

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

I dont't why my test case all failed.



export default FeedbackSystem;