"use client";

import dynamic from "next/dynamic";
import "react-quill-new/dist/quill.snow.css";

const ReactQuill = dynamic(() => import("react-quill-new"), {
    ssr: false,
    loading: () => <div style={{ height: "300px", background: "#f8fafc", borderRadius: "0.75rem", border: "1.5px solid #e2e8f0" }} />
});

interface RichEditorProps {
    value: string;
    onChange: (content: string) => void;
    placeholder?: string;
}

export default function RichEditor({ value, onChange, placeholder }: RichEditorProps) {
    const modules = {
        toolbar: [
            [{ header: [1, 2, 3, false] }],
            ["bold", "italic", "underline", "strike"],
            [{ list: "ordered" }, { list: "bullet" }],
            ["link", "clean"],
        ],
    };

    return (
        <div className="rich-editor-wrapper" style={{ minHeight: "300px" }}>
            <ReactQuill
                theme="snow"
                value={value}
                onChange={onChange}
                placeholder={placeholder}
                modules={modules}
                style={{ height: "250px", marginBottom: "3rem" }}
            />
        </div>
    );
}