src/features/canvas/components/StickerEdge.jsx

import React from 'react';
import { getBezierPath, BaseEdge, useInternalNode } from '@xyflow/react';

export default function StickerEdge({
  id,
  sourceX,
  sourceY,
  targetX,
  targetY,
  sourcePosition,
  targetPosition,
  style = {},
  selected,
  interactionWidth,
}) {
  const [edgePath] = getBezierPath({
    sourceX,
    sourceY,
    sourcePosition,
    targetX,
    targetY,
    targetPosition,
    curvature: 0.6, // More curved for a "hanging thread" feel
  });

  return (
    <>
      {/* Interaction area for easier clicking */}
      <path
        id={id}
        style={{ fill: 'none', strokeWidth: 20, stroke: 'transparent' }}
        className="react-flow__edge-interaction"
        d={edgePath}
      />
      
      {/* Shadow path */}
      <BaseEdge
        path={edgePath}
        style={{
          ...style,
          strokeWidth: 3,
          stroke: 'rgba(0,0,0,0.1)',
          fill: 'none',
          transform: 'translate(1px, 2px)',
        }}
      />
      
      {/* Main Thread */}
      <BaseEdge
        path={edgePath}
        style={{
          ...style,
          strokeWidth: selected ? 3 : 2,
          stroke: selected ? '#f59e0b' : '#94a3b8', // Amber when selected, slate otherwise
          strokeDasharray: '5 3', // Slightly longer dashes
          fill: 'none',
          strokeLinecap: 'round',
          transition: 'stroke 0.2s, stroke-width 0.2s',
        }}
      />

      {/* Optional: Small highlight on the thread */}
      <BaseEdge
        path={edgePath}
        style={{
          ...style,
          strokeWidth: 0.5,
          stroke: 'rgba(255,255,255,0.4)',
          fill: 'none',
          strokeDasharray: '2 10',
        }}
      />
    </>
  );
}