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

const Input = ({ className, value, disabled, error, innerRef, ...props }) => {
  return (
    <input
      value={value}
      ref={innerRef}
      className={classNames(
        'sw-input text-sm text-pickledBlack leading-button border border-porcelain py-2 px-4 rounded',
        'hover:border-secondary-100',
        { 'opacity-40 cursor-not-allowed': disabled },
        { 'border-radicalRed-100 hover:border-radicalRed-120 focus:border-radicalRed-120': error },
        className
      )}
      disabled={disabled}
      {...props}
    />
  )
}

Input.propTypes = {
  /** Allows passing of classes to component */
  className: oneOfType([string, object, array]),
  /** Determines if input is disabled */
  disabled: bool,
  /** Determine if control has error */
  error: bool,
  /** Control the value of the input element */
  value: oneOfType([string, number]).isRequired
}

Input.defaultProps = {
  disabled: false,
  error: false
}

Input.displayName = 'Input'

export default Input