"use client";
import { useEditor, EditorContent } from "@tiptap/react";
import StarterKit from "@tiptap/starter-kit";
import Underline from "@tiptap/extension-underline";
import ToolBar from "~/components/tip-tap/toolbar";
function Tiptap({
  value,
  onChange,
  id,
}: {
  value: string;
  onChange: (richText: string) => void;
  id: string;
}) {
  const editor = useEditor({
    extensions: [StarterKit, Underline],
    content: value,
    editorProps: {
      attributes: {
        class:
          "prose  max-w-none overflow-auto h-full w-full rounded-md border min-h-[30rem] max-h-[50rem] border-input bg-background focus:ring-offset-2 disabled:cursor-not-allows disabled:opacity-50 p-2",
      },
    },
    onUpdate({ editor }) {
      onChange(editor.getHTML());
    },
    immediatelyRender: false,
  });

  return (
    <div
      className="flex h-full min-h-[250px] w-full flex-col justify-stretch"
      id={id}
    >
      <ToolBar editor={editor} />
      <EditorContent editor={editor} />
    </div>
  );
}

export default Tiptap;
