frontend/src/components/architecture/CustomEdge.jsx

import { BaseEdge, EdgeLabelRenderer, getSmoothStepPath } from '@xyflow/react';

const EDGE_COLORS = {
  imports: '#94a3b8',
  api_call: '#38bdf8',
  database: '#10b981',
  event: '#f59e0b',
  inheritance: '#8b5cf6',
};

export default function CustomEdge({ id, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, data, markerEnd, label }) {
  const [edgePath, labelX, labelY] = getSmoothStepPath({
    sourceX,
    sourceY,
    sourcePosition,
    targetX,
    targetY,
    targetPosition,
    borderRadius: 18,
  });
  const color = EDGE_COLORS[data?.edgeType] || '#64748b';

  return (
    <>
      <BaseEdge id={id} path={edgePath} markerEnd={markerEnd} style={{ stroke: color, strokeWidth: 2 }} />
      {label && (
        <EdgeLabelRenderer>
          <div
            className="pointer-events-none absolute max-w-[180px] rounded-md border border-white/10 bg-slate-950/90 px-2 py-1 text-[10px] text-slate-300 shadow-lg"
            style={{ transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)` }}
          >
            {label}
          </div>
        </EdgeLabelRenderer>
      )}
    </>
  );
}