/* @aztlan/generator-front 0.13.0 */
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 = 'test-component'

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

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

  return (
    <div
      id={id}
      className={[
        baseClassName,
        componentClassName,
        userClassName,
      ]
        .filter((e) => e)
        .join(' ')}
      style={style}
      // {...otherProps}
    >
      THIS IS A TEST
      <br />
      {children}
    </div>
  )
}

TestComponent.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,
}

export default TestComponent