// MarkdownEditor.jsx
// KendoReact Splitter implementation for dual-pane markdown editing with live preview
import React, { useState } from 'react';
import { Splitter, SplitterPane } from '@progress/kendo-react-layout';
import { marked } from 'marked';

function MarkdownEditor({ markdownContent, onMarkdownChange, onSplitterChange, panes }) {
    return (
        // KendoReact Splitter for dual-pane markdown editing with live preview
        <Splitter 
            style={{ height: '575px', width: '100%' }}
            panes={panes}
            onChange={onSplitterChange}
        >
            <SplitterPane>
                <div style={{ padding: '10px' }}>
                    <h4 style={{ margin: '0 0 10px 0' }}>Markdown Editor</h4>
                    <textarea
                        value={markdownContent}
                        onChange={onMarkdownChange}
                        style={{ 
                            width: '100%',
                            height: '500px',
                            fontFamily: 'Arial, sans-serif',
                            fontSize: '14px',
                            lineHeight: '1.5',
                            backgroundColor: '#f5f1e9',
                            color: '#3d3d3d',
                            resize: 'none',
                            border: '1px solid #e0e0e0',
                            borderRadius: '8px',
                            padding: '10px',
                            outline: 'none',
                            marginBottom: '10px'
                        }}
                        placeholder="Enter markdown content..."
                    />
                </div>
            </SplitterPane>
            <SplitterPane>
                <div style={{ padding: '10px' }}>
                    <h4 style={{ margin: '0 0 10px 0' }}>Live Preview</h4>
                    <div 
                        style={{ 
                            height: '500px',
                            overflow: 'auto',
                            border: '1px solid #e0e0e0',
                            borderRadius: '8px',
                            padding: '10px',
                            fontFamily: 'Arial, sans-serif',
                            fontSize: '14px',
                            lineHeight: '1.5',
                            backgroundColor: '#f5f1e9',
                            color: '#3d3d3d',
                            marginBottom: '10px'
                        }}
                        dangerouslySetInnerHTML={{ 
                            __html: marked(markdownContent) 
                        }}
                    />
                </div>
            </SplitterPane>
        </Splitter>
    );
}

export default MarkdownEditor;
