interface ConnectionLineProps {
  x1: number;
  y1: number;
  x2: number;
  y2: number;
  strength: number;
  kind: "spawn" | "meeting";
}

/** Curved dashed line between two collaborating agents. */
export function ConnectionLine({ x1, y1, x2, y2, strength, kind }: ConnectionLineProps) {
  const dx = x2 - x1;
  const dy = y2 - y1;
  const dist = Math.sqrt(dx * dx + dy * dy) || 1;
  const offset = Math.min(dist * 0.2, 50);
  const cx = (x1 + x2) / 2 - (dy / dist) * offset;
  const cy = (y1 + y2) / 2 + (dx / dist) * offset;
  const pathData = `M ${x1} ${y1} Q ${cx} ${cy} ${x2} ${y2}`;

  const color = kind === "spawn" ? "#d97757" : "#9a7fd1";
  const isStrong = strength >= 0.5;

  return (
    <g style={{ pointerEvents: "none" }}>
      <path
        d={pathData}
        fill="none"
        stroke={color}
        strokeWidth={(isStrong ? 3 : 1.5) + 2}
        opacity={Math.max(0.04, strength * 0.15)}
        style={{ filter: "blur(3px)" }}
      />
      <path
        d={pathData}
        fill="none"
        stroke={color}
        strokeWidth={isStrong ? 2.4 : 1.5}
        strokeDasharray={isStrong ? "10,6" : "6,4"}
        opacity={Math.max(0.25, strength)}
        style={{ animation: "dash-flow 1.2s linear infinite" }}
      />
    </g>
  );
}
