import React from 'react';

export interface ILoading {
  center?: boolean;
  className?: string;
  show?: boolean;
  size?: 'sm' | 'lg' | 'fullscreen';
  [x: string]: any;
}

export const Loading: React.FC<ILoading> = (props) => {
  const { center, className, show = true, size, ...otherProps } = props;

  function classNames() {
    let classList = 'b-loading';
    if (center) {
      classList += ` center`;
    }
    if (show) {
      classList += ` is-visible`;
    } else {
      classList += ` is-hidden`;
    }
    if (size) {
      classList += ` b-loading-${size}`;
    }
    if (className) {
      classList += ` ${className}`;
    }
    return classList;
  }

  return (
    <div className={classNames()} {...otherProps}>
      {props.children}
    </div>
  );
};