import PropTypes from 'prop-types';
import React from 'react';
import { Dimmer, Loader } from 'semantic-ui-react';

import { SUI } from '../../lib';

/* Interface */
const propTypes = {
  /** An overlay can have its colours inverted. */
  inverted: PropTypes.bool,

  /** Loaders can have different sizes. */
  size: PropTypes.oneOf(SUI.SIZES),
};

/* Defaults */
const defaultProps = {
  size: 'massive',
};

/**
 * Full-page loader overlay
 * @param {Object} props - React component props.
 * @returns {Object} React element.
 */
const LoaderOverlay = ({ inverted, size }) => (
  <Dimmer active inverted={ !inverted }>
    <Loader size={ size } />
  </Dimmer>
);

LoaderOverlay.propTypes = propTypes;
LoaderOverlay.defaultProps = defaultProps;

export default LoaderOverlay;
