import React, { ComponentProps } from "react";
import AceEditor from "../../editors/AceEditor";

type Props = ComponentProps<typeof AceEditor> & {
    value: string;
    setValue: React.Dispatch<any>;
    maxHeight: string;
};

export default function MarkdownEditorComponent({
    value,
    setValue,
    maxHeight,
    ...props
}: Props) {
    return (
        <AceEditor
            mode="markdown"
            content={value}
            onChange={(newValue) => {
                setValue(newValue);
            }}
            wrapperProps={{
                style: { height: maxHeight },
                className: `max-h-[${maxHeight}]`,
            }}
            placeholder="## Write Some markdown ..."
            fontSize="14px"
            {...props}
        />
    );
}