"use client";
import dynamic from "next/dynamic";
import type React from "react";

import "react-quill/dist/quill.snow.css";

// Import Quill modules after React Quill is loaded
if (typeof window !== 'undefined') {
  const Quill = require('quill');
  const QuillImageResize = require('quill-image-resize-module').default;
  Quill.register("modules/imageResize", QuillImageResize);
}

const ReactQuill = dynamic(() => import("react-quill"), { ssr: false });

type RichTextEditorProps = {
    value: string;
    onChange: (html: string) => void;
    placeholder?: string;
    className?: string;
};

export default function RichTextEditor({
                                           value,
                                           onChange,
                                           placeholder,
                                           className,
                                       }: RichTextEditorProps) {
    return (
        <div className={className}>
            <div className="bb-quill">
                <ReactQuill
                    theme="snow"
                    value={value}
                    onChange={onChange}
                    placeholder={placeholder}
                    modules={{
                        toolbar: [
                            [{ header: [1, 2, 3, false] }],
                            ["bold", "italic", "underline", "strike"],
                            [{ color: [] }, { background: [] }],
                            [{ list: "ordered" }, { list: "bullet" }],
                            ["blockquote", "code-block"],
                            ["link"],
                            ["clean"],
                        ],
                    }}
                />
            </div>
        </div>
    );
}