import React, { useState } from "react";
// import ReactQuill from 'react-quill';
import "react-quill/dist/quill.snow.css";
import dynamic from "next/dynamic";
const ReactQuill = dynamic(() => import("react-quill"), { ssr: false });

interface MyEditorProps {
  content: string;
  onContentChange?: (content: string) => void;
  customStyle?: React.CSSProperties;
}

const MyEditor: React.FC<MyEditorProps> = ({ content, onContentChange, customStyle }) => {
  const [value, setValue] = useState<string>(content);

  const handleEditorDataChange = (newContent: string) => {
    setValue(newContent);
    onContentChange && onContentChange(content);
  };

  return (
    <div style={customStyle}>
      <ReactQuill
        theme="snow"
        value={value}
        onChange={handleEditorDataChange}
        modules={{
          toolbar: [
            [{ header: "1" }, { header: "2" }, { font: [] }],
            [{ font: [] }],
            [{ size: [] }],
            ["bold", "italic", "underline"],
            [{ align: [] }],
            [{ list: "ordered" }, { list: "bullet" }],
            ["link", "image", "video"],
            ["clean"],
          ],
        }}
        formats={[
          "header",
          "font",
          "size",
          "bold",
          "italic",
          "underline",
          "list",
          "bullet",
          "align",
          "link",
          "image",
          "video",
        ]}
      />
    </div>
  );
};

export default MyEditor;