import * as React from 'react';
import { FC } from 'react';
import { style, keyframes } from 'typestyle';

interface SpinnerProps {
  size?: number;
  borderWidth?: number;
}

const Spinner: FC<SpinnerProps> = ({ size = 40, borderWidth = 3 }) => (
  <div
    className={style({
      width: size,
      height: size,
      border: `${borderWidth}px solid rgba(255, 255, 255, 0.25)`,
      borderTopColor: 'rgba(255, 255, 255, 0.85)',
      borderRadius: '50%',
      animationName: keyframes({ to: { transform: 'rotate(360deg)' } }),
      animationDuration: '0.75s',
      animationTimingFunction: 'linear',
      animationIterationCount: 'infinite',
    })}
  />
);

export default Spinner;