import React from 'react';
import cn from 'classnames';
import { Icon } from 'UI';
import stl from './controlButton.module.css';

const ControlButton = ({
  label,
  icon = '',
  disabled = false,
  onClick,
  // count = 0,
  hasErrors = false,
  active = false,
  size = 20,
  noLabel,
  labelClassName,
  containerClassName,
  noIcon,
}) => (
  <button
    className={cn(
      stl.controlButton,
      { [stl.disabled]: disabled },
      'relative',
      active ? 'border-b-2 border-main' : 'rounded',
      containerClassName
    )}
    onClick={onClick}
    id={'control-button-' + label.toLowerCase()}
    disabled={disabled}
  >
    <div className={stl.labels}>
      {hasErrors && <div className={stl.errorSymbol} />}
      {/* {count > 0 && <div className={stl.countLabel}>{count}</div>} */}
    </div>
    {!noIcon && <Icon name={icon} size={size} color="gray-dark" />}
    {!noLabel && (
      <span className={cn(stl.label, labelClassName, active ? 'color-main' : 'color-gray-darkest')}>
        {label}
      </span>
    )}
  </button>
);

ControlButton.displayName = 'ControlButton';

export default ControlButton;