// @flow
// React and third-party libraries
import * as React from 'react'

// Styles
import styles from './styles.css'

// Utility
import type { Message, Theme } from '../../../types'
import { classNames, renderMessage } from '../../../utils'

export type Props = {
  /** Children to be rendered in the main container. */
  children?: React.Node,
  /** React component or string specifying the HTML tag to use. */
  component?: React.ElementType,
  /** Button label, rendered before any children. */
  message?: Message,
  /** Inline style. */
  style?: Object,
  /** Theme CSS module. */
  theme?: Theme,
}

export type State = {}

class {{ name }} extends {{{ type }}}<Props, State> {
  static defaultProps = {
    component: 'div',
  }

  state: State = {}

  props: Props

  render() {
    const { children, component, message, theme, ...otherProps } = this.props

    const cx = classNames.bind([styles, theme]) // eslint-disable-line react/jsx-no-bind

    // this is so that flow doesn't complain about undefined component in JSX
    const Component = component || {{ name }}.defaultProps.component

    return (
      <Component {...otherProps} className={cx('{{ name }}')}>
        {renderMessage(message)}
        {children}
      </Component>
    )
  }
}

export default {{ name }}