// Use your MDX content with this component.

import React from 'react'
import MDX from '@mdx-js/runtime'
import components from '../utils/markdown/markdown'

// Renders a cimple loading spinner as a test
import Loading from './Loading'

const mdxComponents = {
  ...components,
  Loading: Loading, // Add the custom component to the default markdown HTML components
}

// Add variables here if needed.
const scope = {}

// Children is an MDX string
const MdxContent = ({ children, style = {} }) => {
  return (
    <View style={style}>
      <MDX components={mdxComponents} scope={scope}>
        {children}
      </MDX>
    </View>
  )
}

export default MdxContent