text: // @flow
  import classNames from 'classnames';
  import React from 'react';
  import Icon from '../Icon';
  import Loader from '../Loader';
  import type {Button as ButtonProps} from './types';
  import buttonStyles from './button.scss';
  
  const LOADER_SIZE = 20;
  const ICON_ANGLE_DOWN = 'su-angle-down';
  
  export default class Button extends React.PureComponent<ButtonProps> {
      static defaultProps = {
          disabled: false,
          hasOptions: false,
          active: false,
          primary: false,
      };
  
      handleOnClick = () => {
          this.props.onClick();
      };
  
      render() {
          const {
              icon,
              size,
              skin,
              value,
              active,
              primary,
              loading,
              disabled,
              hasOptions,
          } = this.props;
          const buttonClass = classNames(
              buttonStyles.button,
              {
                  [buttonStyles.active]: active,
                  [buttonStyles[size]]: size,
                  [buttonStyles[skin]]: skin,
                  [buttonStyles.primary]: primary,
              }
          );
          const buttonContent = this.props.children || value;
  
          return (
              <button
                  disabled={disabled}
                  className={buttonClass}
                  onClick={this.handleOnClick}
                  value={value}
              >
                  {loading &&
                      <Loader size={LOADER_SIZE} className={buttonStyles.loader} />
                  }
                  {icon &&
                      <Icon name={icon} className={buttonStyles.icon} />
                  }
                  {buttonContent &&
                      <span className={buttonStyles.label}>{buttonContent}</span>
                  }
                  {hasOptions &&
                      <Icon name={ICON_ANGLE_DOWN} className={buttonStyles.dropdownIcon} />
                  }
              </button>
          );
      }
  }
  