'use client';

import React, { memo } from 'react';
import { Handle, Position } from '@xyflow/react';
import { CirclePlus } from 'lucide-react';
import { cn } from '@/utils';

interface NodeHandlesProps {
  onHandleClick: (event: React.MouseEvent, handleType: 'source') => void;
}

export const NodeHandles = memo(({ onHandleClick }: NodeHandlesProps) => {
  return (
    <>
      <Handle
        type="target"
        position={Position.Left}
        className={cn(
          "absolute -left-3 top-1/2 -translate-y-1/2 !w-4 !h-4 rounded-full bg-card flex items-center justify-center transition-all duration-300 opacity-0 group-hover:opacity-100 hover:scale-110 cursor-crosshair z-50 shadow-md",
          "[.is-connecting_&]:ring-2 [.is-connecting_&]:ring-cyan-400 [.is-connecting_&]:animate-pulse [.is-connecting_&]:opacity-100"
        )}
        style={{ left: -12 }}
      >
        <CirclePlus className="!w-4 !h-4 text-foreground/80 pointer-events-none fill-card" strokeWidth={1.5} />
      </Handle>

      <Handle
        type="source"
        position={Position.Right}
        className={cn(
          "absolute -right-3 top-1/2 -translate-y-1/2 !w-4 !h-4 rounded-full bg-card flex items-center justify-center transition-all duration-300 opacity-0 group-hover:opacity-100 hover:scale-110 cursor-crosshair z-50 shadow-md",
          "[.is-connecting_&]:ring-2 [.is-connecting_&]:ring-purple-400 [.is-connecting_&]:animate-pulse [.is-connecting_&]:opacity-100"
        )}
        style={{ right: -12 }}
        onClick={(e) => onHandleClick(e, 'source')}
      >
        <CirclePlus className="!w-4 !h-4 text-foreground/80 pointer-events-none fill-card" strokeWidth={1.5} />
      </Handle>
    </>
  );
});

NodeHandles.displayName = 'NodeHandles';
