"use client";

import { useEditor, EditorContent } from "@tiptap/react";
import StarterKit from "@tiptap/starter-kit";
import Placeholder from "@tiptap/extension-placeholder";

export default function RichTextEditor({
  value,
  onChange,
  disabled = false,
  className = "",
  style,
  placeholder = "Mulai menulis...",
  onInput,
  ...props
}: {
  value: string;
  onChange: (html: string) => void;
  disabled?: boolean;
  className?: string;
  style?: React.CSSProperties;
  placeholder?: string;
  onInput?: React.FormEventHandler<HTMLDivElement>;
  [key: string]: any;
}) {
  const editor = useEditor({
    immediatelyRender: false,
    editable: !disabled,
    extensions: [
    StarterKit.configure({
        bold: false,
        italic: false,
        blockquote: false,
        codeBlock: false,
        heading: false,
        bulletList: {
            keepMarks: true,
        },
        orderedList: {
            keepMarks: true,
        },
        }),
      Placeholder.configure({
        placeholder,
      }),
    ],
    content: value,
    onUpdate({ editor }) {
      onChange(editor.getHTML());
    },
  });

  return (
      <EditorContent
        className={`${className}`} style={style}
        editor={editor}
        onInput={onInput}
        {...props}
      />
  );
}``