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

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

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

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

export default function RichTextEditor({
                                           value,
                                           onChange,
                                           placeholder,
                                           className,
                                       }: RichTextEditorProps) {
    const modules = useMemo(
        () => ({
            toolbar: [
                [{ header: [1, 2, 3, false] }],
                ["bold", "italic", "underline", "strike"],
                [{ color: [] }, { background: [] }],
                [{ list: "ordered" }, { list: "bullet" }],
                ["blockquote", "code-block"],
                ["link"],
                ["clean"],
            ],
        }),
        []
    );

    return (
        <div className={className}>
            <div className="bb-quill">
                <ReactQuill
                    theme="snow"
                    value={value}
                    onChange={onChange}
                    placeholder={placeholder}
                    modules={modules}
                />
            </div>
        </div>
    );
}