import React from 'react'
import PropTypes from 'prop-types'
import RehypeReact from 'rehype-react'
import Repository from './Repository'
import styles from './DocContent.module.scss'

const renderAst = new RehypeReact({
  createElement: React.createElement,
  components: { repo: Repository }
}).Compiler

const DocContent = ({ html, htmlAst }) =>
  html ? (
    <div className={styles.docContent}>{renderAst(htmlAst)}</div>
  ) : (
    <div className={styles.empty}>
      This is a placeholder for now. Help creating it.
    </div>
  )

DocContent.propTypes = {
  html: PropTypes.string,
  htmlAst: PropTypes.object
}

export default DocContent