import { jsx as ___EmotionJSX } from "@emotion/core";
import React from 'react';
import PropTypes from 'prop-types';
import { COLORS } from '../../constants';
import { LoadingSpinnerContainer, Overlay, Dot } from './style';

var LoadingSpinner = function LoadingSpinner(_ref) {
  var bgColor = _ref.bgColor,
      color = _ref.color,
      translateX = _ref.translateX,
      duration = _ref.duration,
      size = _ref.size;
  return ___EmotionJSX(LoadingSpinnerContainer, {
    bgColor: bgColor,
    id: "loading-spinner"
  }, ___EmotionJSX(Overlay, null, ___EmotionJSX(Dot, {
    color: color,
    translateX: translateX,
    duration: duration,
    size: size
  }), ___EmotionJSX(Dot, {
    color: color,
    translateX: translateX,
    duration: duration,
    size: size
  }), ___EmotionJSX(Dot, {
    color: color,
    translateX: translateX,
    duration: duration,
    size: size
  })));
};

LoadingSpinner.propTypes = {
  bgColor: PropTypes.string,
  color: PropTypes.string,
  translateX: PropTypes.string,
  duration: PropTypes.number,
  size: PropTypes.string
};
LoadingSpinner.defaultProps = {
  bgColor: COLORS.background,
  color: COLORS.primary,
  translateX: '100px',
  duration: 2,
  size: '14px'
};
export default LoadingSpinner;