import { Card, Splitter } from 'antd'
import PropTypes from 'prop-types'
import CodeBlockEditor from './CodeBlockEditor'
import MarkdownDisplay from './MarkdownDisplay'

const MarkdownInput = ({ value, onChange }) => {
  return (
    <Splitter className={'farmcontrol-splitter'} style={{ height: '100%' }}>
      <Splitter.Panel>
        <Card>
          <CodeBlockEditor
            code={value}
            onChange={onChange}
            language='markdown'
          />
        </Card>
      </Splitter.Panel>
      <Splitter.Panel>
        <Card style={{ height: '100%' }}>
          <MarkdownDisplay content={value} />
        </Card>
      </Splitter.Panel>
    </Splitter>
  )
}

MarkdownInput.propTypes = {
  value: PropTypes.string.isRequired,
  onChange: PropTypes.func
}

export default MarkdownInput