import { Box } from './Box';

interface GlowProps {
  color?: 'primary' | 'aqua' | 'purple' | 'amber';
  size?: 'sm' | 'md' | 'lg' | 'xl';
  opacity?: number;
  position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'center';
  className?: string;
}

export function Glow({ 
  color = 'primary', 
  size = 'md', 
  opacity = 0.1,
  position = 'center',
  className = '' 
}: GlowProps) {
  const colorMap = {
    primary: 'from-primary-accent/20',
    aqua: 'from-telemetry-aqua/20',
    purple: 'from-purple-500/20',
    amber: 'from-warning-amber/20',
  };

  const sizeMap = {
    sm: 'w-64 h-64',
    md: 'w-96 h-96',
    lg: 'w-[32rem] h-[32rem]',
    xl: 'w-[48rem] h-[48rem]',
  };

  const positionMap = {
    'top-left': '-top-32 -left-32',
    'top-right': '-top-32 -right-32',
    'bottom-left': '-bottom-32 -left-32',
    'bottom-right': '-bottom-32 -right-32',
    'center': 'top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2',
  };

  return (
    <Box
      position="absolute"
      className={`${sizeMap[size]} ${positionMap[position]} bg-radial-gradient ${colorMap[color]} to-transparent blur-[100px] pointer-events-none ${className}`}
      style={{ opacity }}
      zIndex={0}
    />
  );
}