I was creating a infinite craft like app where we get 4 elements ( earth , water , fire, air ) that we can combine to generate other elements. We can combine 2 elements to create a new elements. I used the google gemini api to help me generate unlimited combos. I'll give you the code please review it and fix the minor issues. Also it seems i am not able to drop the elements in the canvas so please take a look at it. If you have any suggestions and ideas please let me know. Here's my code: import React, { useState, useRef, useEffect } from 'react';
import { GoogleGenerativeAI } from "@google/generative-ai";
import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";

// Initialize Gemini AI with a placeholder API key
const API_KEY = "YOUR_API_KEY_HERE"; // Replace this with your actual API key when testing locally
const genAI = new GoogleGenerativeAI(API_KEY);
const model = genAI.getGenerativeModel({ model: "gemini-1.5-pro" }); // Updated to use gemini-1.5-pro

const Element = ({ name, onDragStart }) => {
  return (
    <Card
      className="inline-flex items-center justify-center p-2 m-1 cursor-move"
      draggable
      onDragStart={(e) => onDragStart(e, { name })}
    >
      <span className="text-sm">{name}</span>
    </Card>
  );
};

export default function InfiniteCraftGame() {
  const [elements] = useState(['Water', 'Fire', 'Wind', 'Earth']);
  const [createdElements, setCreatedElements] = useState([]);
  const [canvasElements, setCanvasElements] = useState([]);
  const [isLoading, setIsLoading] = useState(false);
  const canvasRef = useRef(null);

  useEffect(() => {
    if (API_KEY === "YOUR_API_KEY_HERE") {
      console.warn("Please replace 'YOUR_API_KEY_HERE' with your actual Gemini API key.");
    }
  }, []);

  const handleDragStart = (e, element) => {
    e.dataTransfer.setData('text/plain', JSON.stringify(element));
  };

  const handleDragOver = (e) => {
    e.preventDefault();
  };

  const handleDrop = async (e) => {
    e.preventDefault();
    const droppedElement = JSON.parse(e.dataTransfer.getData('text/plain'));
    const rect = canvasRef.current.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;

    setCanvasElements([...canvasElements, { ...droppedElement, x, y }]);

    if (canvasElements.length === 1) {
      setIsLoading(true);
      try {
        const prompt = `Create a new element by combining ${canvasElements[0].name} and ${droppedElement.name}. Respond with only the name of the new element, nothing else.`;
        const result = await model.generateContent(prompt);
        const newElementName = result.response.text().trim();
        if (newElementName && !createdElements.includes(newElementName) && !elements.includes(newElementName)) {
          setCreatedElements(prev => [...prev, newElementName]);
        } else {
          console.warn("Generated element already exists or is invalid.");
        }
      } catch (error) {
        console.error('Failed to generate new element:', error);
        alert('Failed to generate new element. Please check your API key and try again.');
      } finally {
        setIsLoading(false);
        setCanvasElements([]);
      }
    }
  };

  const handleReset = () => {
    setCreatedElements([]);
    setCanvasElements([]);
  };

  return (
    <div className="min-h-screen flex flex-col p-2">
      <h1 className="text-2xl font-bold text-center mb-2">Infinite Craft</h1>

      <div className="flex-grow flex flex-col">
        <Card
          ref={canvasRef}
          className="flex-grow mb-2 p-2 relative overflow-hidden"
          onDragOver={handleDragOver}
          onDrop={handleDrop}
        >
          {canvasElements.map((element, index) => (
            <div
              key={index}
              style={{
                position: 'absolute',
                left: element.x,
                top: element.y,
              }}
            >
              <Element
                name={element.name}
                onDragStart={handleDragStart}
              />
            </div>
          ))}
          {canvasElements.length === 0 && !isLoading && (
            <div className="absolute inset-0 flex items-center justify-center text-lg text-gray-500">
              Drag and drop elements here to combine
            </div>
          )}
          {isLoading && (
            <div className="absolute inset-0 flex items-center justify-center text-lg text-gray-500">
              Generating new element...
            </div>
          )}
        </Card>

        <div className="overflow-x-auto">
          <div className="flex flex-wrap gap-2 pb-2">
            {[...elements, ...createdElements].map((element, index) => (
              <Element
                key={index}
                name={element}
                onDragStart={handleDragStart}
              />
            ))}
          </div>
        </div>
      </div>

      <Button onClick={handleReset} variant="outline" size="sm" className="mt-2">
        Reset
      </Button>
    </div>
  );
}