import MainAreaButton from "./MainAreaButton";
export default function MainArea({ title, editableRef, setEditableContent, wordOffsets, currentActiveWord, setCurrentActiveWord, setCurrentWordIndex }) {
    return (
        <div className="modal-main">
            <h1
                className="modal-title"
                dangerouslySetInnerHTML={{ __html: title }} />

            {/* Horizontal line separator */}
            <hr style={{ margin: "1rem 0", border: "1px solid #ddd" }} />

            <div
                ref={editableRef}
                className="modal-html-preview modal-body"
                contentEditable ={false}
                suppressContentEditableWarning={true}
                onInput={(e) => setEditableContent(e.currentTarget.innerHTML)} />

            {/* Horizontal line separator */}
            <hr style={{ margin: "1rem 0", border: "1px solid #ddd" }} />

            {/* Word buttons */}
            <MainAreaButton wordOffsets={wordOffsets} currentActiveWord={currentActiveWord} setCurrentActiveWord={setCurrentActiveWord} setCurrentWordIndex={setCurrentWordIndex} />
        </div>
    );
}