import { Box } from './Box';

export interface StatusDotProps {
  intent?: 'primary' | 'success' | 'warning' | 'critical' | 'telemetry';
  color?: string; // Alias for intent or custom color
  pulse?: boolean;
  size?: 'sm' | 'md' | 'lg' | number;
}

/**
 * StatusDot
 * 
 * A simple status indicator dot with optional pulse effect.
 */
export function StatusDot({ 
  intent = 'telemetry', 
  color: colorProp,
  pulse = false, 
  size = 'md',
}: StatusDotProps) {
  const intentColorMap = {
    primary: 'var(--ui-color-intent-primary)',
    success: 'var(--ui-color-intent-success)',
    warning: 'var(--ui-color-intent-warning)',
    critical: 'var(--ui-color-intent-critical)',
    telemetry: 'var(--ui-color-intent-telemetry)',
  };

  const sizeMap = {
    sm: '0.375rem',
    md: '0.5rem',
    lg: '0.75rem',
  };

  const color = colorProp || intentColorMap[intent];
  const dimension = typeof size === 'string' ? sizeMap[size] : `${size * 0.25}rem`;
  
  return (
    <Box position="relative" width={dimension} height={dimension}>
      <Box 
        fullWidth 
        fullHeight 
        style={{ backgroundColor: color, borderRadius: '9999px' }} 
      />
      {pulse && (
        <Box 
          position="absolute" 
          inset={0} 
          className="animate-ping" 
          style={{ backgroundColor: color, opacity: 0.75, borderRadius: '9999px' }} 
        />
      )}
    </Box>
  );
}