import React from 'react';

interface ConnectionProps {
  from: { x: number; y: number };
  to: { x: number; y: number };
  fromColor?: string;
  toColor?: string;
}

export const Connection: React.FC<ConnectionProps> = ({ from, to, fromColor, toColor }) => {
  return (
    <g>
      {/* Glow effect */}
      <line
        x1={from.x}
        y1={from.y}
        x2={to.x}
        y2={to.y}
        stroke={fromColor || "#a855f7"}
        strokeWidth="3"
        opacity="0.3"
      />
      
      {/* Main line */}
      <line
        x1={from.x}
        y1={from.y}
        x2={to.x}
        y2={to.y}
        stroke={fromColor || "#a855f7"}
        strokeWidth="1"
        opacity="0.7"
        className="transition-all duration-300"
      />
    </g>
  );
};