import React, { useState } from "react";
const reviewTitle = ["Readability", "Performance", "Security", "Documentation", "Testing"];

const FeedbackSystem = () => {
  const [upvoteCount, setUpVoteCount] = useState({});
  const [downVoteCount, setDownVoteCount] = useState({});

  const handleUpVote = (item, date) => {
    setUpVoteCount((prev) => {
      const prevVotes = prev[item]?.upvote || 0;
      return {
        ...prev,
        [item]: {
          upvote: prevVotes + 1,
          lastVotedAt: date,
        },
      };
    });
  };

  const handleDownVote = (item, date) => {
    setDownVoteCount((prev) => {
      const prevVotes = prev[item]?.downvote || 0;
      return {
        ...prev,
        [item]: {
          downvote: prevVotes + 1,
          lastVotedAt: date,
        },
      };
    });
  };


  return (
    <div className="my-0 mx-auto text-center w-mx-1200">
      <div className="flex wrap justify-content-center mt-30 gap-30">
        {reviewTitle && (
          reviewTitle?.map((item, index) => {
            return (
              <div className="pa-10 w-300 card" key={item}>
                <h2>{item}</h2>
                <div className="flex my-30 mx-0 justify-content-around">
                  <button className="py-10 px-15" data-testid={`upvote-btn-${index}`}
                    onClick={() => handleUpVote(item, new Date().getTime())}>
                    👍 Upvote
                  </button>
                  <button className="py-10 px-15 danger" data-testid={`downvote-btn-${index}`} onClick={() => handleDownVote(item, new Date().getTime())}>
                    👎 Downvote
                  </button>
                </div>
                <p className="my-10 mx-0" data-testid={`upvote-count-${index}`}>
                  Upvotes: <strong>{upvoteCount?.[item]?.upvote || 0}</strong>
                </p>
                <p className="my-10 mx-0" data-testid={`downvote-count-${index}`}>
                  Downvotes: <strong>{downVoteCount?.[item]?.downvote || 0}</strong>
                </p>
              </div>
            )
          }))}
      </div>
    </div>
  );
};

export default FeedbackSystem;

  const [upvote, setUpvote] = useState(0)
  const [downvote, setDownvote] = useState(0)

  const handleDownvoteClick = () => {
    if (downvote == 0 && title === "Performance") {
      setDownvote((prev) => prev + 1)
    }
  }
  const handleUpvoteClick = () => {
    switch (title) {
      case "Readability":
        if (upvote == 0) {
          setUpvote((prev) => prev + 1)
        }
        break;
      case "Security":
        setUpvote((prev) => prev + 2)
        break;
      case "Documentation":
        setUpvote((prev) => prev + 3)
        break;
      case "Testing":
        setUpvote(0)
        setDownvote(0)
      default:
        console.log(`Sorry, we are out.`);
    }
  }

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;