{/* Form */ }
<form onSubmit={handleSubmit} className="flex flex-col gap-2 p-10">
    <h1 className="text-center text-xl font-semibold">
        Voting Form
    </h1>
    <input
        name="name"
        placeholder="Name (required)"
        value={formData.name}
        onChange={handleChange}
        className="p-2 border"
        required
    />

    <input
        name="email"
        placeholder="Email (required)"
        value={formData.email}
        onChange={handleChange}
        className="p-2 border"
        required
    />

    {pokemonList.map((pokemon, index) => (
        <label key={index} className="flex items-center gap-2 p-2 border-2 cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700">
            <input
                type="radio"
                name="vote"
                value={pokemon.name}
                onChange={handleChange}
            />
            {pokemon.name}
        </label>
    ))}

    <button disabled={loading} className="bg-blue-500 text-white p-2">
        Submit
    </button>

    {message && <p>{message}</p>}
</form>

const [formData, setFormData] = useState({
    name: "",
    email: "",
    vote: "",
    // Not uploaded to the Database. This is used for route.ts switch case
    action: "Demo",
});


...


// Handles anything Input related on the Voting Demo Form
const handleChange = (e: any) => {
    setFormData({ ...formData, [e.target.name]: e.target.value });
};

// When the Form is submitted
const handleSubmit = async (e: any) => {
    e.preventDefault();
    setMessage("");

    // If the user did not vote a specific pokemon, error message is shown
    if (!formData.vote) {
        setMessage("Error: Please select a Pokémon to vote for.");
        return;
    }

    // If all inputs are entered, perform a POST request in the route.ts where we head to the "Demo" switch statement
    const res = await fetch("/api/vote", {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
        },
        body: JSON.stringify({
            name: formData.name,
            email: formData.email,
            vote: formData.vote,
            action: "Demo", // Not uploaded to the Database. This is used for route.ts switch case
        }),
    });

    const data = await res.json();

    if (!res.ok) {
        setMessage(data?.error || "Error: Form submission failed.");
    } else {
        setMessage("Vote submitted successfully!");
        setFormData({
            name: "",
            email: "",
            vote: "",
            action: "Demo", // Not uploaded to the Database. This is used for route.ts switch case
        });
    }
};

// If the user did not vote a specific pokemon, error message is shown
if (!formData.vote) {
    setMessage("Error: Please select a Pokémon to vote for.");
    return;
}

// If all inputs are entered, perform a POST request in the route.ts where we head to the "Demo" switch statement
const res = await fetch("/api/vote", {
    method: "POST",
    headers: {
        "Content-Type": "application/json",
    },
    body: JSON.stringify({
        name: formData.name,
        email: formData.email,
        vote: formData.vote,
        action: "Demo", // Not uploaded to the Database. This is used for route.ts switch case
    }),
});

const data = await res.json();

if (!res.ok) {
    setMessage(data?.error || "Error: Form submission failed.");
} else {
    setMessage("Vote submitted successfully!");
    setFormData({
        name: "",
        email: "",
        vote: "",
        action: "Demo", // Not uploaded to the Database. This is used for route.ts switch case
    });
}

action: "Demo", // Not uploaded to the Database. This is used for route.ts switch case

case "Demo": {
    const { name, email, vote } = body;

    if (!name || !email || !vote) {
        return NextResponse.json(
            { error: "Missing name, email, or vote" },
            { status: 400 }
        );
    }

    // Insert the row that contains their name, email, and the vote they voted for
    const { error } = await supabase
        .from("VoteDemo")
        .insert([
            {
                Name: name,
                Email: email,
                Vote: vote,
            },
        ]);

    if (error) {
        console.log("Supabase insert error (VoteDemo):", error);

        return NextResponse.json(
            { error: error.message },
            { status: 500 }
        );
    }

    return NextResponse.json({
        success: true,
        message: "Vote saved successfully in VoteDemo",
    });
}