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

const List = ({ activeIndex, children, className, onClickHandler, ...props }) => {
  return (
    <div {...props} className={className}>
      {React.Children.map(children, (child, index) => {
        return React.cloneElement(child, {
          isActive: activeIndex === index,
          onClickHandler: () => onClickHandler(index)
        })
      })}
    </div>
  )
}

List.propTypes = {
  /** Which tab is active (showing) */
  activeIndex: number,
  /** Contents */
  children: node,
  /** Additional classnames */
  className: oneOfType([string, object, array]),
  /**  function to activate a tab */
  onClickHandler: func
}

List.defaultProps = {
  className: ''
}

export default List