import * as React from 'react'
import {ReactElement} from 'react'
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
import mjml2html from 'mjml-browser'
import {renderToMjml} from 'mjml-react'

/**
 * This is the root component for all email templates.
 * @param props - props object containing children
 * @returns Email-compatible HTML markup
 * @category Components
 *
 * @example
 * ```jsx
 * <Email>
 *   <Mjml>
 *     <MjmlHead>
 *       <MjmlTitle>{titleFromValuesMjs}</MjmlTitle>
 *       <MjmlPreview>Last Minute Offer...</MjmlPreview>
 *     </MjmlHead>
 *     <MjmlBody width={500}>
 *       <MjmlSection fullWidth backgroundColor="#efefef">
 *         <MjmlColumn>
 *          <MjmlText> Some text here </MjmlText>
 *           <MjmlImage srcset={srcSet} />
 *         </MjmlColumn>
 *       </MjmlSection>
 *     </MjmlBody>
 *   </Mjml>
 * </Email>
 * ```
 */
const Email = ({children}: {children: ReactElement}) => {
  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
  // @ts-ignore
  const {html} = mjml2html(renderToMjml(children))

  return (
    <>
      <style>{`html,body {overflow: revert !important}`}</style>
      <div dangerouslySetInnerHTML={{__html: html}} style={{display: `contents`}} />
    </>
  )
}

export default Email