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

const Tab = ({ children, className, isActive, onClickHandler, ...props }) => {
  const styles = classNames(
    'focus-outline-none',
    'sw-tab',
    { 'sw-tab-active': isActive },
    className
  )

  return (
    <button {...props} onClick={onClickHandler} className={styles}>
      {children}
    </button>
  )
}

Tab.propTypes = {
  /** Contents*/
  children: node,
  /** Additional classnames */
  className: oneOfType([string, object, array]),
  /** Active state */
  isActive: bool,
  /** Click method, controls which View/Tab is active */
  onClickHandler: func
}

Tab.defaultProps = {
  className: ''
}

export default Tab