Untitled

import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { motion } from "framer-motion";

export default function CupPong() {
  const [score, setScore] = useState(0);
  const [cups, setCups] = useState(Array(6).fill(true));

  const throwBall = (index) => {
    if (cups[index]) {
      // Simulate AI difficulty with a random chance to hit
      const hit = Math.random() > 0.5;
      if (hit) {
        const newCups = [...cups];
        newCups[index] = false;
        setCups(newCups);
        setScore(score + 1);
      }
    }
  };

  const resetGame = () => {
    setCups(Array(6).fill(true));
    setScore(0);
  };

  return (
    <div className="flex flex-col items-center p-4">
      <h1 className="text-2xl font-bold mb-4">AI Cup Pong</h1>
      <div className="grid grid-cols-3 gap-4 mb-6">
        {cups.map((active, index) => (
          <motion.div
            key={index}
            className={`w-16 h-16 rounded-full flex items-center justify-center ${active ? 'bg-red-500' : 'bg-gray-300'}`}
            onClick={() => throwBall(index)}
            whileTap={{ scale: 0.9 }}
          >
            {active ? "🎯" : "❌"}
          </motion.div>
        ))}
      </div>
      <p className="text-xl mb-4">Score: {score}</p>
      <Button onClick={resetGame}>Reset Game</Button>
    </div>
  );
}