// @flow
import React from 'react';
import styled from 'styled-components';

import { imagesAssetsBaseUrl } from '../../../Theme/Vars';

type Props = {|
  className?: ?any,
|};

const SpinningImage = styled.img`
  width: 64px;
  height: 64px;
  border-radius: 100%;
  margin-bottom: 10px;
  animation: rotation 2s infinite linear;
  @keyframes rotation {
    from {transform: rotate(0deg);}
    to   {transform: rotate(359deg);}
  }
`;

const spinnerImgUrl = `${imagesAssetsBaseUrl}spinner.png`;

const Spinner = ({ className }: Props) => (
  <div className={className} style={{ textAlign: 'center' }}>
    <SpinningImage src={spinnerImgUrl} alt="Loading" />
  </div>
);

Spinner.defaultProps = {
  className: '',
};

export default Spinner;