import React from 'react';
import styled, { keyframes, css } from 'styled-components';

export interface SpinnerProps {
  size?: 'sm' | 'md' | 'lg';
  color?: string;
}

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

const StyledSpinner = styled.div<SpinnerProps>`
  display: inline-block;
  border-radius: 50%;
  border-style: solid;
  border-color: ${({ theme, color }) => color || theme.colors.primary};
  border-right-color: transparent;
  animation: ${rotate} 0.6s linear infinite;

  ${({ size = 'md' }) => {
    switch (size) {
      case 'sm':
        return css`
          width: 16px;
          height: 16px;
          border-width: 2px;
        `;
      case 'lg':
        return css`
          width: 40px;
          height: 40px;
          border-width: 4px;
        `;
      default:
        return css`
          width: 24px;
          height: 24px;
          border-width: 3px;
        `;
    }
  }}
`;

export const Spinner: React.FC<SpinnerProps> = (props) => {
  return <StyledSpinner {...props} />;
};