import React from "react";

const ProfileImageUpload = () => {
  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    const formData = new FormData(event.currentTarget);

    try {
      const response = await fetch("/api/uploadimage", {
        method: "POST",
        body: formData,
      });
      if (response.ok) {
        alert("success");
      } else {
        alert("failed");
      }
      const result = await response.json();
      console.log("Testing data:");
      console.log(result);

      if (response.ok) {
        const data = await response.json();
        console.log("Uploaded image data:", data);
        // Do something with the response data, e.g., display a success message
      } else {
        console.error("Image upload failed");
      }
    } catch (error) {
      console.error("An error occurred during image upload:", error);
    }
  };

  return (
    <div>
      <h1>Profile Image Upload</h1>
      <form onSubmit={handleSubmit}>
        <input type="text" name="name" placeholder="Name" required />
        {/* Add other input fields */}
        <input type="file" name="profileImage" accept="image/*" required />
        <button type="submit">Submit</button>
      </form>
    </div>
  );
};

export default ProfileImageUpload;