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

import { Icon } from '@swrve/icons'

const TextButton = ({
  children,
  className,
  disabled = false,
  icon,
  innerRef,
  onClick,
  type = 'button',
  ...props
}) => (
  <button
    ref={innerRef}
    className={classNames(
      'sw-text-button select-none text-xs text-secondary-100 hover:text-secondary-120 focus:text-secondary-120 focus:outline-none flex items-center',
      className,
      {
        'opacity-40 cursor-not-allowed': disabled
      }
    )}
    disabled={disabled}
    onClick={e => !disabled && onClick(e)}
    type={type}
    {...props}
  >
    {children}
    {icon && (
      <span className="flex items-center animation justify-center bg-secondary-10 h-4 w-4 rounded-full ml-2">
        <Icon name={icon} size="xsmall" />
      </span>
    )}
  </button>
)

TextButton.displayName = 'TextButton'

TextButton.propTypes = {
  /** Children wrapped by the component */
  children: node,
  /** CSS classes passed from outside, to be composed with existing internal styles */
  className: oneOfType([string, object, array]),
  /** Disables interaction with the button */
  disabled: bool,
  /** Callback function that will be called when the button is clicked */
  onClick: func.isRequired,
  /** used to attach a ref to the button */
  innerRef: func
}

export default TextButton