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

interface LoadingSpinnerProps {
  size?: number;
  color?: string;
  className?: string;
}

export function LoadingSpinner({ size = 8, color = '#3b82f6', className = '' }: LoadingSpinnerProps) {
  return (
    <Box 
      w={`${size * 0.25}rem`}
      h={`${size * 0.25}rem`}
      rounded="full"
      borderWidth="2px"
      borderStyle="solid"
      borderColor="transparent"
      borderTopColor={color}
      borderLeftColor={color}
      className={`animate-spin ${className}`} 
      role="status"
      aria-label="Loading"
    />
  );
}