import React from 'react'
import classNames from 'classnames'
import { oneOfType, node, string, object, array, func } from 'prop-types'

const FormGroup = ({ children, className, labelFor, label, headerRight, ...props }) => (
  <div className={classNames('sw-form-label mb-1 text-sm text-regentGrey', className)} {...props}>
    <div className={classNames('mb-1', { flex: headerRight })}>
      <label htmlFor={labelFor} className="block">
        {label}
      </label>
      {headerRight && headerRight()}
    </div>
    {children}
  </div>
)

FormGroup.displayName = 'FormGroup'

FormGroup.propTypes = {
  /** Control component to be passed as a child */
  children: node.isRequired,
  /** Applies custom classes to the wrapping div */
  className: oneOfType([string, object, array]),
  /** Sets the value of the label's for attribute */
  labelFor: string,
  /** Sets the content of the rendered label element */
  label: node.isRequired,
  /** render prop that adds an icon to the top right */
  headerRight: func
}

export default FormGroup