import React from 'react';
import { Connection as ConnectionType } from '../lib/types';

export const Connection: React.FC<ConnectionType> = ({ from, to, color }) => {
  if (!from || !to) {
    console.log(`Connection: ${from} -> ${to} is fucked up`);
    return null;
  };
  const baseColor = color || "#a855f7";

  return (
    <g>
      {/* Glow effect */}
      <line
        x1={from.x}
        y1={from.y}
        x2={to.x}
        y2={to.y}
        stroke={baseColor}
        strokeWidth={"5"}
        opacity="0.3"
      />

      {/* Main line */}
      <line
        x1={from.x}
        y1={from.y}
        x2={to.x}
        y2={to.y}
        stroke={baseColor}
        strokeWidth={"1"}
        opacity="0.7"
        className="transition-all duration-300"
      />
    </g>
  );
};
