import React from 'react';
import { Box } from './Box';

export interface LoadingSpinnerProps {
  size?: 'sm' | 'md' | 'lg' | number;
  intent?: 'primary' | 'high' | 'low';
}

export const LoadingSpinner = ({ 
  size = 'md',
  intent = 'primary' 
}: LoadingSpinnerProps) => {
  const sizeMap = {
    sm: '1rem',
    md: '2rem',
    lg: '3rem',
  };

  const dimension = typeof size === 'string' ? sizeMap[size] : `${size * 0.25}rem`;

  const intentColorMap = {
    primary: 'var(--ui-color-intent-primary)',
    high: 'var(--ui-color-text-high)',
    low: 'var(--ui-color-text-low)',
  };

  return (
    <Box 
      width={dimension} 
      height={dimension} 
      style={{
        border: '2px solid rgba(255, 255, 255, 0.1)',
        borderTop: `2px solid ${intentColorMap[intent]}`,
        borderRadius: '50%',
      }}
      className="animate-spin"
      role="status"
      aria-label="Loading"
    />
  );
};