import React from 'react'
import { MDXProvider, MDXProviderProps } from '@mdx-js/react'
import { mdxPlacholderText } from './assets'
import { Link } from './link'
export interface MDXProps {
  /** MDX-File -> has to be required */
  file?: { default: (props: any) => JSX.Element }
  /** Css class for container */
  className?: string
  [key: string]: any
}
/**
 * Load and render MDX files.
 *
 */
export const Mdx = ({
  file,
  className = 'cbMDX',
  noContainer = false,
  ...props
}: MDXProps) => {
  if (!file) {
    return <div className='cbMdx cbPlaceholder'>{mdxPlacholderText}</div>
  }

  const Content = file.default
  return (
    <div className={className}>
      <Content {...props} />
    </div>
  )
}

/**
 * Custom components to render markdown
 */
const mdComponents = {
  a: Link,
  h1: (props: any) => <h1 className='ui header' {...props} />,
  h2: (props: any) => <h2 className='ui header' {...props} />,
  h3: (props: any) => <h3 className='ui header' {...props} />
}

export const MdxProvider = (props: MDXProviderProps) => (
  <MDXProvider components={mdComponents}>{props.children}</MDXProvider>
)