/**
 * EdgePath
 *
 * Renders the visual drag handle indicator on a node for edge creation.
 * Provides a 44×44px touch target with a smaller visual indicator inside.
 *
 * Extracted from EdgeOverlay.tsx in v1.5.0.
 *
 * @since 1.5.0
 */

import React from 'react';

// --- Types ---

export interface EdgePathProps {
	/** Ref to the handle element (used for gesture binding) */
	handleRef: React.Ref<HTMLDivElement>;
	/** Custom class name */
	className?: string;
	/** Custom styles for the handle */
	style?: React.CSSProperties;
}

// --- Component ---

export function EdgePath({ handleRef, className, style }: EdgePathProps) {
	return (
		<div
			ref={handleRef}
			className={className}
			style={{
				position: 'absolute',
				top: '50%',
				right: '-22px',
				height: '44px',
				width: '44px',
				transform: 'translateY(-50%)',
				cursor: 'crosshair',
				display: 'flex',
				alignItems: 'center',
				justifyContent: 'center',
				touchAction: 'none',
				...style,
			}}
			onPointerEnter={(e) => {
				const visual = (e.currentTarget as HTMLElement).firstChild as HTMLElement;
				if (visual) visual.style.backgroundColor = 'var(--list-item-border-active, #888)';
			}}
			onPointerLeave={(e) => {
				const visual = (e.currentTarget as HTMLElement).firstChild as HTMLElement;
				if (visual) visual.style.backgroundColor = 'var(--list-item-border, #666)';
			}}
		>
			{/* Visual indicator (smaller than hit area) */}
			<div
				style={{
					height: '32px',
					width: '12px',
					borderRadius: '3px',
					backgroundColor: 'var(--list-item-border, #666)',
					transition: 'background-color 0.2s',
					pointerEvents: 'none',
				}}
			/>
		</div>
	);
}
