// @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,
}

const {{ name }} = ({ children, component, message, theme, ...otherProps }: Props) => {
  const cx = classNames.bind([styles, theme])

  // 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>
  )
}

{{ name }}.defaultProps = {
  component: 'div',
}

export default {{ name }}