'use client'

export default function BackgroundAnimations({ variant = 'default' }: { variant?: 'default' | 'grid' | 'particles' | 'gradient' }) {
  if (variant === 'grid') {
    return (
      <div className="absolute inset-0 overflow-hidden pointer-events-none">
        <div className="animated-grid absolute inset-0 opacity-30" />
      </div>
    )
  }

  if (variant === 'particles') {
    return (
      <div className="absolute inset-0 overflow-hidden pointer-events-none">
        <div className="animated-grid absolute inset-0 opacity-20" />
        {/* Particules flottantes */}
        {[...Array(6)].map((_, i) => (
          <div
            key={i}
            className="floating-blob absolute rounded-full"
            style={{
              width: `${20 + i * 10}px`,
              height: `${20 + i * 10}px`,
              background: `radial-gradient(circle, rgba(0, 255, 136, ${0.1 + i * 0.05}) 0%, transparent 70%)`,
              left: `${10 + i * 15}%`,
              top: `${10 + i * 12}%`,
              animationDelay: `${i * 0.5}s`,
              animationDuration: `${15 + i * 3}s`,
            }}
          />
        ))}
      </div>
    )
  }

  if (variant === 'gradient') {
    return (
      <div className="absolute inset-0 overflow-hidden pointer-events-none">
        <div className="animated-grid absolute inset-0 opacity-25" />
        <div
          className="absolute top-1/4 right-1/4 w-96 h-96 bg-security-accent/5 rounded-full blur-3xl pulse-glow"
          style={{ animationDelay: '0s' }}
        />
        <div
          className="absolute bottom-1/4 left-1/4 w-96 h-96 bg-green-500/5 rounded-full blur-3xl pulse-glow"
          style={{ animationDelay: '2s' }}
        />
        <div
          className="absolute top-1/2 left-1/2 w-80 h-80 bg-emerald-500/5 rounded-full blur-3xl pulse-glow"
          style={{ animationDelay: '4s', transform: 'translate(-50%, -50%)' }}
        />
      </div>
    )
  }

  // Default variant
  return (
    <div className="absolute inset-0 overflow-hidden pointer-events-none">
      <div className="animated-grid absolute inset-0 opacity-20" />
      <div
        className="floating-blob absolute top-1/4 right-1/4 w-96 h-96 bg-security-accent/5 rounded-full blur-3xl"
        style={{ animationDelay: '0s' }}
      />
      <div
        className="floating-blob absolute bottom-1/4 left-1/4 w-96 h-96 bg-green-500/5 rounded-full blur-3xl"
        style={{ animationDelay: '1s' }}
      />
      <div
        className="floating-blob absolute top-1/2 right-1/3 w-80 h-80 bg-emerald-500/5 rounded-full blur-3xl"
        style={{ animationDelay: '2s' }}
      />
    </div>
  )
}