import React, { ReactElement } from 'react';
import './Button.scss';
import { LoadingBalls } from '../LoadingBalls';
import classnames from 'classnames';

interface Props {
  loading?: boolean;
  disabled?: boolean;
  className?: string;
  theme?: string;
  children?: Array<ReactElement | string> | ReactElement | string;
  onClick?: () => void;
}

export const Button: React.FC<Props> = ({
  loading = false,
  disabled = false,
  className,
  theme,
  children,
  onClick = () => false,
}) => (
  <button
    className={classnames(
      'mo-display-button',
      theme,
      {
        loading: loading,
        disabled: disabled,
      },
      className,
    )}
    onClick={() => !disabled && onClick()}
  >
    {loading ? <LoadingBalls className={'button-loading-balls'} /> : children}
  </button>
);