import { BaseEdge, getSmoothStepPath } from "@xyflow/react";
import type { EdgeProps } from "@xyflow/react";

export function BpmnAssociationEdge(props: EdgeProps) {
  const [edgePath] = getSmoothStepPath({
    sourceX: props.sourceX,
    sourceY: props.sourceY,
    targetX: props.targetX,
    targetY: props.targetY,
    sourcePosition: props.sourcePosition,
    targetPosition: props.targetPosition,
  });

  return (
    <BaseEdge
      id={props.id}
      path={edgePath}
      style={{
        stroke: "var(--edge-default)",
        strokeWidth: 1,
        strokeDasharray: "3 3",
      }}
      label={props.label}
      labelStyle={{ fill: "var(--foreground)", fontSize: 11 }}
      labelBgStyle={{
        fill: "var(--node-bg)",
        fillOpacity: 0.8,
      }}
      labelShowBg
    />
  );
}
