/**
 * Copyright 2024 Phenix Real Time Solutions, Inc. Confidential and Proprietary. All Rights Reserved.
 */
import * as styled from 'styled-components';
import Theme from 'theme';

interface LoadingWheelProps {
  size?: 'small' | 'medium' | 'large';
  color?: string;
  className?: string;
}

const LoadingWheelContainer = styled.default.div<{
  size: number;
  color: string;
}>`
  display: inline-block;
  width: ${({size}) => size}px;
  height: ${({size}) => size}px;
  border: 3px solid ${({color}) => color}20;
  border-radius: 50%;
  border-top-color: ${({color}) => color};
  animation: spin 1s ease-in-out infinite;

  @keyframes spin {
    to {
      transform: rotate(360deg);
    }
  } 
`;

export const LoadingWheel: React.FC<LoadingWheelProps> = ({size = 'medium', color = Theme.colors.white, className}) => {
  const sizeMap = {
    small: Theme.loaderSize.small,
    medium: Theme.loaderSize.medium,
    large: Theme.loaderSize.large
  };

  return <LoadingWheelContainer size={sizeMap[size]} color={color} className={className} role="status" aria-label="Loading" />;
};

export default LoadingWheel;
