'use client';

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

interface SubtleParticleProps {
  count?: number;
  size?: number;
  color?: string;
  className?: string;
}

export function SubtleParticles({
  count = 20,
  size = 3,
  color = '#C41E3A',
  className = ''
}: SubtleParticleProps) {
  const [particles, setParticles] = useState<Array<{
    id: number;
    x: number;
    y: number;
    delay: number;
    duration: number;
  }>>([]);

  useEffect(() => {
    const generatedParticles = Array.from({ length: count }, (_, i) => ({
      id: i,
      x: Math.random() * 100,
      y: Math.random() * 100,
      delay: Math.random() * 5,
      duration: 8 + Math.random() * 4
    }));
    setParticles(generatedParticles);
  }, [count]);

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

  return (
    <div className={`absolute inset-0 pointer-events-none ${className}`}>
      {particles.map((particle) => (
        <motion.div
          key={particle.id}
          className="absolute rounded-full"
          style={{
            width: size,
            height: size,
            backgroundColor: color,
            left: `${particle.x}%`,
            top: `${particle.y}%`
          }}
          initial={{ opacity: 0, scale: 0 }}
          animate={{
            opacity: [0, 0.3, 0.3, 0],
            scale: [0, 1, 1, 0],
            y: [0, -20, -20, 0]
          }}
          transition={{
            duration: particle.duration,
            delay: particle.delay,
            repeat: Infinity,
            ease: 'easeInOut',
            times: [0, 0.3, 0.7, 1]
          }}
        />
      ))}
    </div>
  );
}

export default SubtleParticles;