import React from 'react';
import cx from 'classnames';
import { LoaderIcon } from '../../../icons/LoaderIcon';
import { ButtonProps } from '../.shared/types';
import { buttonIconDefaultProps, sizes } from '../.shared/common';

export function ButtonIcon({
  className,
  disabled,
  active,
  children,
  success,
  loading,
  size,
  ...rest
}: ButtonProps) {
  const classes = cx('button-icon', className, {
    'button-icon-active': !disabled && active,
    'button-icon-success': !disabled && success,
    'button-icon-lg': size === sizes.lg,
    'button-icon-md': size === sizes.md,
    'button-icon-sm': size === sizes.sm,
    'button-icon-xs': size === sizes.xs,
  });

  return (
    <button className={classes} disabled={disabled} {...rest}>
      {loading ? <LoaderIcon /> : children}
    </button>
  );
}

ButtonIcon.defaultProps = buttonIconDefaultProps;
