'use client';

import { motion } from 'framer-motion';
import { useState, useEffect } from 'react';

interface GlowEffectProps {
  className?: string;
  color?: string;
  count?: number;
}

export function GlowEffect({
  className = '',
  color = '#C41E3A',
  count = 3
}: GlowEffectProps) {
  const [glows, setGlows] = useState<Array<{
    id: number;
    size: number;
    x: number;
    y: number;
    delay: number;
  }>>([]);

  useEffect(() => {
    const generatedGlows = Array.from({ length: count }, (_, i) => ({
      id: i,
      size: 150 + Math.random() * 100,
      x: Math.random() * 100,
      y: Math.random() * 100,
      delay: i * 2
    }));
    setGlows(generatedGlows);
  }, [count]);

  if (glows.length === 0) {
    return <div className={`absolute inset-0 pointer-events-none ${className}`} />;
  }

  return (
    <div className={`absolute inset-0 pointer-events-none ${className}`}>
      {glows.map((glow) => (
        <motion.div
          key={glow.id}
          className="absolute rounded-full"
          style={{
            width: glow.size,
            height: glow.size,
            background: `radial-gradient(circle, ${color} 0%, transparent 70%)`,
            left: `${glow.x}%`,
            top: `${glow.y}%`,
            transform: 'translate(-50%, -50%)'
          }}
          initial={{ opacity: 0, scale: 0.5 }}
          animate={{
            opacity: [0, 0.4, 0.4, 0],
            scale: [0.5, 1.2, 1.2, 0.5]
          }}
          transition={{
            duration: 8,
            delay: glow.delay,
            repeat: Infinity,
            ease: 'easeInOut',
            times: [0, 0.3, 0.7, 1]
          }}
        />
      ))}
    </div>
  );
}

export default GlowEffect;