import styled from '@emotion/styled';
import propTypes from '@styled-system/prop-types';
import { string, number, oneOfType } from 'prop-types';
import { keyframes } from '@emotion/core';
import { color } from 'styled-system';

const rotate = keyframes`
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
`;

const Loader = styled('span')(
  {
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: '50%',
    animation: `${rotate} 0.75s linear infinite`,
    borderStyle: 'solid',
    borderRightColor: 'transparent',
  },
  (props) => ({
    width: props.size,
    height: props.size,
    borderWidth: `calc(${toPx(props.size)} / 5)`,
  }),
  color,
);

Loader.propTypes = {
  // If passing a string, it needs to have a unit, e.g. "20px", not "20"
  size: oneOfType([string, number]),
  ...propTypes.color,
};

Loader.defaultProps = {
  size: 30,
};

function toPx(n) {
  return typeof n === 'number' ? n + 'px' : n;
}

export default Loader;