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

const HeadCell = ({ children, className, disabled, onClick }) => (
  <th
    className={classNames(
      'sw-table-headcell',
      'p-4 text-left',
      'uppercase font-normal text-xs tracking-wide',
      'text-regentGrey',
      className
    )}
    onClick={e => !disabled && onClick(e.target.value)}
  >
    {children}
  </th>
)

HeadCell.displayName = 'HeadCell'

HeadCell.propTypes = {
  /** Component's children */
  children: oneOfType([string, node]),
  /** Custom className */
  className: oneOfType([string, object, array]),
  /** disable cell */
  disabled: bool,
  /** onClick callback */
  onClick: func.isRequired
}

HeadCell.defaultProps = {
  onClick: () => {}
}

export default HeadCell