import React from "react";
import JoditEditor from "jodit-react";
import { IRichText } from "./types";
import { Text } from "../../components/typography/Typography";

export const RichText: React.FC<IRichText> = ({
  title,
  editor,
  value,
  config,
  setContent,
  tabIndex,
  className,
  ...attr
}) => {
  return (
    <div>
      <Text type="P" style={{ marginBottom: "10px" }}>
        {title}
      </Text>
      <JoditEditor
        ref={editor}
        value={value}
        config={config}
        onBlur={newContent => setContent(newContent)} // preferred to use only this option to update the content for performance reasons
        onChange={content => setContent(content)}
        {...attr}
      />
    </div>
  );
};