"use client";

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

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

const modules = {
  toolbar: [
    [{ header: [1, 2, 3, 4, 5, 6, false] }],
    ["bold", "italic", "underline", "strike"],
    [{ list: "ordered" }, { list: "bullet" }],
    ["link", "image"],
    ["clean"],
  ],
};

const formats = [
  "header",
  "bold", "italic", "underline", "strike",
  "list",
  "link",
];

export function RichTextEditor({
  value,
  onChange,
  placeholder,
}: {
  value: string;
  onChange: (html: string) => void;
  placeholder?: string;
}) {
  return (
    <ReactQuill
      theme="snow"
      value={value}
      onChange={onChange}
      modules={modules}
      formats={formats}
      placeholder={placeholder}
      className="[&_.ql-editor]:min-h-44 [&_.ql-editor]:text-sm [&_.ql-editor]:font-medium [&_.ql-editor]:leading-7 [&_.ql-editor]:text-[var(--color-ink)] [&_.ql-container]:border-0 [&_.ql-toolbar]:rounded-t-[6px] [&_.ql-toolbar]:border [&_.ql-toolbar]:border-[var(--color-hairline)] [&_.ql-container]:rounded-b-[6px] [&_.ql-container]:border [&_.ql-container]:border-t-0 [&_.ql-container]:border-[var(--color-hairline)] [&_.ql-toolbar]:bg-white"
    />
  );
}