import { Box } from './Box';

interface DecorativeBlurProps {
  color?: 'blue' | 'green' | 'purple' | 'yellow' | 'red';
  size?: 'sm' | 'md' | 'lg' | 'xl';
  position?: 'top-right' | 'bottom-left' | 'center';
  opacity?: number;
}

export function DecorativeBlur({ 
  color = 'blue', 
  size = 'md', 
  position = 'center',
  opacity = 10
}: DecorativeBlurProps) {
  const colorClasses = {
    blue: 'bg-primary-accent',
    green: 'bg-success-green',
    purple: 'bg-purple-600',
    yellow: 'bg-warning-amber',
    red: 'bg-critical-red'
  };

  const sizeClasses = {
    sm: 'w-32 h-32 blur-xl',
    md: 'w-48 h-48 blur-2xl',
    lg: 'w-64 h-64 blur-3xl',
    xl: 'w-96 h-96 blur-[64px]'
  };

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

  const opacityStyle = { opacity: opacity / 100 };

  return (
    <Box 
      className={`${colorClasses[color]} ${sizeClasses[size]} ${positionClasses[position]} rounded-full pointer-events-none`}
      style={opacityStyle}
    />
  );
}