'use client'

interface AnimatedPipeProps {
  d: string
  width?: number
  color?: string
  speed?: 'slow' | 'normal' | 'fast'
  opacity?: number
}

export default function AnimatedPipe({
  d,
  width = 4,
  color = '#2dd4bf',
  speed = 'normal',
  opacity = 0.6,
}: AnimatedPipeProps) {
  const speedClass = {
    slow: 'animate-pipe-flow-slow',
    normal: 'animate-pipe-flow',
    fast: 'animate-pipe-flow-fast',
  }[speed]

  return (
    <g>
      {/* Outer wall */}
      <path
        d={d}
        fill="none"
        stroke={color}
        strokeWidth={width + 4}
        strokeOpacity={opacity * 0.3}
        strokeLinecap="round"
      />
      {/* Inner flow */}
      <path
        d={d}
        fill="none"
        stroke={color}
        strokeWidth={width}
        strokeOpacity={opacity}
        strokeLinecap="round"
        className={speedClass}
      />
    </g>
  )
}