import React from 'react';
import styled from 'styled-components';

import type { JSX } from 'react';

export type LoadingProps = {
  color: string;
  size: string;
};

export function SpinnerLoader({ color, size }: LoadingProps): JSX.Element {
  return <Spinner color={color} size={size} />;
}

const Spinner = styled.div<{ color: string; size: string }>`
  width: ${({ size }) => size};
  height: ${({ size }) => size};
  border: 3px solid ${({ color }) => color};
  border-bottom-color: transparent;
  border-radius: 50%;
  display: inline-block;
  box-sizing: border-box;
  animation: rotation 1s linear infinite;

  @keyframes rotation {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
`;