import React, { Component } from 'react';
import { ClipLoader } from 'react-spinners';
import {COLOR_BLUE} from 'utils/GlobalConstants.js';

class SpinnerContainer extends Component {
  render() {
    // if loading, show content as busy (ex: grey out)
    const spinnerContentClass = this.props.loading ? 'spinner-content' : '';
    return (
      <div className='spinner-container'>
        <div className='spinner'>
          <ClipLoader color={COLOR_BLUE} loading={this.props.loading} />
        </div>
        <div className={spinnerContentClass}>
          {this.props.children}
        </div>
      </div>
    );
  }
}
export default SpinnerContainer;

SpinnerContainer.propTypes = {
  loading: React.PropTypes.bool
};

SpinnerContainer.defaultProps = {
  loading: false
};