`import React, { useState, useEffect } from "react";
import { toast, Toaster } from "react-hot-toast";
import Markdown from "markdown-to-jsx";
import { FileUploaderRegular } from '@uploadcare/react-uploader';
import '@uploadcare/react-uploader/core.css';

const Submit = () => {
  const [isLoading, setIsLoading] = useState(false);
  const [newPost, setNewPost] = useState({ title: "", content: "", coterie: "" });
  const [imageFiles, setImageFiles] = useState([]); // Store image objects with UUIDs and URLs
  const [coteries, setCoteries] = useState([]);

  useEffect(() => {
    const fetchCoteries = async () => {
      try {
        const userId = localStorage.getItem("user_id");
        const response = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/user/${userId}/coteries`);
        const data = await response.json();

        if (response.ok) {
          setCoteries(data);
        } else {
          toast.error("Failed to fetch coteries", { icon: "❌" });
        }
      } catch (error) {
        toast.error("Error fetching coteries", { icon: "❌" });
      }
    };

    fetchCoteries();
  }, []);

  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setNewPost((prev) => ({ ...prev, [name]: value }));
  };

  const handleImageUpload = (fileInfo) => {
    if (fileInfo.uuid) {
      const imageUrl = `https://ucarecdn.com/${fileInfo.uuid}/-/preview/750x1000/`;
      setImageFiles((prev) => [...prev, { uuid: fileInfo.uuid, cdnUrl: imageUrl }]);
      toast.success("Image uploaded successfully");
    } else {
      toast.error("Image upload failed: No UUID received");
    }
  };

  const handleSubmit = async (e) => {
    e.preventDefault();

    if (!newPost.title || !newPost.content) {
      toast.error("Title and content are required", {
        icon: "❌",
        style: {
          borderRadius: "5px",
          background: "#333",
          color: "#ceaaaa",
        },
      });
      return;
    }

    setIsLoading(true);

    try {
      let uploadedImageUrls = "";

      if (imageFiles.length > 0) {
        uploadedImageUrls = imageFiles.map(file => file.cdnUrl).join(","); // Join CDN URLs
        setImageFiles([]); // Clear file list after submission
      }

      const userId = localStorage.getItem("user_id");
      let url = `${process.env.NEXT_PUBLIC_API_URL}/post/add?title=${encodeURIComponent(newPost.title)}&content=${encodeURIComponent(newPost.content)}&userId=${encodeURIComponent(userId)}&image=${encodeURIComponent(uploadedImageUrls)}`;

      if (newPost.coterie) {
        url += `&coterie=${encodeURIComponent(newPost.coterie)}`;
      }

      const response = await fetch(url, {
        method: "POST",
        credentials: "include",
      });

      if (response.ok) {
        setNewPost({ title: "", content: "", coterie: "" });
        toast.success("Post created successfully", {
          icon: "😊",
          style: {
            borderRadius: "5px",
            background: "var(--primary-color)",
            color: "#ffffff",
          },
        });
      } else {
        toast.error("Failed to create post", {
          icon: "❌",
          style: {
            borderRadius: "5px",
            background: "var(--primary-color)",
            color: "#ceaaaa",
          },
        });
      }
    } catch (error) {
      toast.error("Error creating post", {
        icon: "❌",
        style: {
          borderRadius: "5px",
          background: "var(--primary-color)",
          color: "#ceaaaa",
        },
      });
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <div className="mx-auto px-4 py-8 max-w-7xl">
      <div className="max-w-5xl mx-auto px-4 py-8 flex flex-col lg:flex-row">
        <div className="lg:w-3/5 lg:pr-8">
          <div className="dark:bg-secondary border-gl border-[0.5px] rounded-lg shadow-md p-6">
            <form onSubmit={handleSubmit}>
              <div className="mb-4">
                <label htmlFor="title" className="block font-bold mb-2">Title</label>
                <input
                  placeholder="Title"
                  type="text"
                  id="title"
                  name="title"
                  value={newPost.title}
                  onChange={handleInputChange}
                  required
                  className="block w-full rounded-lg border border-primary bg-neutral-950 py-2 px-4 placeholder-gray-500 focus:outline-none"
                />
              </div>

              <div className="mb-4">
                <label htmlFor="content" className="block font-bold mb-2">Content</label>
                <textarea
                  placeholder="Write your post..."
                  id="content"
                  name="content"
                  value={newPost.content}
                  onChange={handleInputChange}
                  required
                  className="block w-full rounded-lg border border-primary bg-neutral-950 py-2 px-4 placeholder-gray-500 focus:outline-none"
                  rows={10}
                ></textarea>
              </div>

              <div className="mb-4">
                <FileUploaderRegular
                  pubkey="6d6f80277afa4e2cf265"
                  sourceList="local, url, gphotos"
                  classNameUploader="uc-dark"
                  onChange={handleImageUpload}
                  accept="image/*"
                />
              </div>

              <div className="mb-4">
                <label htmlFor="coterie" className="block font-bold mb-2">Coterie (optional)</label>
                <select
                  id="coterie"
                  name="coterie"
                  value={newPost.coterie}
                  onChange={handleInputChange}
                  className="block w-full rounded-lg border border-primary bg-neutral-950 py-2 px-4 focus:outline-none"
                >
                  <option value="">Select Coterie</option>
                  {coteries.map((coterie) => (
                    <option key={coterie.id} value={coterie.name}>{coterie.name}</option>
                  ))}
                </select>
              </div>

              <div className="flex justify-end">
                <button
                  type="submit"
                  className="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded-lg"
                  disabled={isLoading}
                >
                  {isLoading ? "Posting..." : "Post"}
                </button>
              </div>
            </form>
          </div>
        </div>
        <div className="lg:w-2/5 mt-8 lg:mt-0 ">
          <div className="bg-white dark:bg-neutral-950 dark:text-white p-4 border border-primary rounded-lg shadow-md">
            <h2 className="font-bold text-xl mb-4">Preview</h2>
            <h2 className="text-xl font-bold">{newPost.title}</h2>
            <Markdown
              options={{
                overrides: {
                  img: {
                    props: {
                      style: {
                        maxWidth: "100%",
                        height: "auto",
                      },
                    },
                  },
                },
              }}
            >
              {newPost.content + (imageFiles.length > 0 ? imageFiles.map(file => `![image](${file.cdnUrl})`).join('\n') : '')}
            </Markdown>
          </div>
        </div>
      </div>
      <Toaster position="top-right" />
    </div>
  );
};

export default Submit;
`