import React from "react";
import {Editor} from "react-draft-wysiwyg";
import {Stack, Text,} from "@chakra-ui/react";
import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css";

export default function TextBoxBlog(props: any) {
    const {handleOnChange, editorState} = props;


    return (
        <Stack w="100%" spacing={"12px"}>
            <Text
                fontFamily="MaisonBook"
                color="#9FA2B4"
                fontSize="12px"
                fontStyle="normal"
                fontWeight="400"
                lineHeight="16px"
                letterSpacing="0.20000001192092896px"
                textAlign="left"
            >
                Content
            </Text>

            <div
                style={{
                    border: "1px solid #DFE0EB",
                    backgroundColor: "white",
                    borderRadius: "8px",
                    padding: "2px",
                    minHeight: "308px",
                    maxWidth: "545px",
                }}
            >
                <Editor
                    editorState={editorState}
                    onEditorStateChange={handleOnChange}

                />
            </div>
        </Stack>
    );
}