Untitled

"use client";
import React, { useState } from "react";
import Wysiwyg from "@/components/wysiwyg";

const ContentForm = () => {
  const [title, setTitle] = useState("");
  const [content, setContent] = useState("");
  const [feature, setFeature] = useState("");
  const [cleanedContent, setCleanedContent] = useState("");
  const [cleanedFeature, setCleanedFeature] = useState("");
  const [successMessage, setSuccessMessage] = useState("");

  const handleTitleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setTitle(event.target.value);
  };

  const handleContentChange = (text: string, cleanedText: string) => {
    setContent(text);
    setCleanedContent(cleanedText);
  };

  const handleFeatureChange = (text: string, cleanedText: string) => {
    setFeature(text);
    setCleanedFeature(cleanedText);
  };

  const handleSubmit = async () => {
    try {
      const response = await fetch("http://localhost:5000/api/content", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          title,
          content: cleanedContent,
          feature: cleanedFeature,
        }),
      });

      if (response.ok) {
        setSuccessMessage("Content successfully submitted!");
        setTimeout(() => {
          window.location.reload();
        }, 1000);
      } else {
        console.error("Failed to add content");
      }
    } catch (error) {
      console.error("Error adding content:", error);
    }
  };

  return (
    <div className="min-h-screen bg-gray-900 p-8">
      <div className="max-w-3xl mx-auto bg-gray-800 p-8 rounded-lg shadow-xl">
        <h1 className="text-2xl font-bold mb-4 text-white">Add New Content</h1>
        {/* title */}
        <div className="mb-6">
          <label className="block mb-2 font-semibold text-white">Title:</label>
          <input
            type="text"
            className="border rounded w-full p-2"
            value={title}
            onChange={handleTitleChange}
          />
        </div>
        {/* content */}
        <div className="mb-6">
          <label className="block mb-2 font-semibold text-white">
            Content:
          </label>
          <Wysiwyg
            onContentChange={handleContentChange}
            initialValue={content}
          />
        </div>
        {/* feature */}
        <div className="mb-6">
          <label className="block mb-2 font-semibold text-white">
            Feature:
          </label>
          <Wysiwyg
            onContentChange={handleFeatureChange}
            initialValue={feature}
          />
        </div>
        <div className="flex justify-end">
          <button
            className="mb-6 bg-emerald-500 text-white px-4 py-2 rounded hover:bg-emerald-600"
            onClick={handleSubmit}
          >
            Submit
          </button>
        </div>
        {successMessage && (
          <div className="bg-green-200 text-green-700 p-2 mb-4 rounded-md">
            {successMessage}
          </div>
        )}
      </div>
    </div>
  );
};

export default ContentForm;