import React from 'react'
import { node, string } from 'prop-types'
import classNames from 'classnames'

const OptionGroup = ({ children, className }) => (
  <div className={className}>
    {React.Children.map(children, (child, index) => {
      const childClassName = getChildClassName(index, children.length)
      return React.cloneElement(child, {
        className: classNames('option-group-btn', childClassName, child.props.className)
      })
    })}
  </div>
)

OptionGroup.displayName = 'OptionGroup'

OptionGroup.propTypes = {
  /** Component's children */
  children: node,
  className: string
}

function getChildClassName(index, childrenLength) {
  if (index === 0) {
    return 'left-option-group-btn'
  }

  if (index === childrenLength - 1) {
    return 'right-option-group-btn'
  }

  return 'middle-option-group-btn'
}

export default OptionGroup