'use client'

import { BaseEdge, getBezierPath, type EdgeProps } from '@xyflow/react'

export default function AnimatedPipeEdge({
  sourceX,
  sourceY,
  targetX,
  targetY,
  sourcePosition,
  targetPosition,
  data,
  style,
}: EdgeProps) {
  const [edgePath] = getBezierPath({
    sourceX,
    sourceY,
    targetX,
    targetY,
    sourcePosition,
    targetPosition,
  })

  const flowRate = (data as any)?.flowRate ?? 3
  const pipeWidth = Math.max(2, Math.min(12, flowRate * 2))

  return (
    <>
      {/* Outer wall */}
      <path
        d={edgePath}
        fill="none"
        stroke="#2dd4bf"
        strokeWidth={pipeWidth + 4}
        strokeOpacity={0.15}
        strokeLinecap="round"
      />
      {/* Inner flow with animation */}
      <path
        d={edgePath}
        fill="none"
        stroke="#2dd4bf"
        strokeWidth={pipeWidth}
        strokeOpacity={0.5}
        strokeLinecap="round"
        className="animate-pipe-flow"
        style={style}
      />
    </>
  )
}