/* @aztlan/generator-front 3.1.2 */
import * as React from 'react'
import { useInsertionEffect } from 'react'

import * as PropTypes from 'prop-types'
import { InferProps } from 'prop-types'

import styleNames from '@aztlan/bem'

const baseClassName = styleNames.base
const componentClassName = 'main'

/**
 * description
 * @param {InferProps<typeof Main.propTypes>} props -
 * @returns {React.ReactElement} - Rendered Main
 */
function Main({
  id,
  className: userClassName,
  style,
  children,
  title,
}: // ...otherProps

InferProps<typeof Main.propTypes>): React.ReactElement {
  /*
  useInsertionEffect(
    () => {
    // @ts-ignore
      import('./styles.scss')
    }, [],
  ) */

  return (
    <div
      id={id}
      className={[
        baseClassName,
        componentClassName,
        userClassName,
      ]
        .filter((e) => e)
        .join(' ')}
      style={style}
      // {...otherProps}
    >
      <h1>{title}</h1>
      {children}
    </div>
  )
}

Main.propTypes = {
  /** The HTML id for this element */
  id:PropTypes.string,

  /** The HTML class names for this element */
  className:PropTypes.string,

  /** The React-written, css properties for this element. */
  style:PropTypes.objectOf(PropTypes.string),

  /** The children JSX */
  children:PropTypes.node,

  /** The title for the main */
  title:PropTypes.string,
}

export default Main