'use client'

interface FlowParticlesProps {
  pathId: string
  count?: number
  color?: string
  size?: number
  duration?: number
}

export default function FlowParticles({
  pathId,
  count = 3,
  color = '#2dd4bf',
  size = 3,
  duration = 3,
}: FlowParticlesProps) {
  return (
    <>
      {Array.from({ length: count }).map((_, i) => (
        <circle
          key={i}
          r={size}
          fill={color}
          className="animate-particle"
          style={{
            offsetPath: `url(#${pathId})`,
            '--duration': `${duration}s`,
            '--delay': `${(i / count) * duration}s`,
          } as React.CSSProperties}
        />
      ))}
    </>
  )
}