/**
 * EdgeLabel
 *
 * Renders an inline label on an edge, positioned at the midpoint.
 * Presentational component — all positioning is controlled via props.
 *
 * Extracted from EdgeOverlay.tsx in v1.5.0.
 *
 * @since 1.5.0
 */

import React from 'react';

// --- Types ---

export interface EdgeLabelProps {
	/** Label text */
	label: string;
	/** X position (absolute, viewport coords) */
	x: number;
	/** Y position (absolute, viewport coords) */
	y: number;
	/** Optional click handler (e.g., to start editing) */
	onClick?: () => void;
	/** Custom class name */
	className?: string;
	/** Custom styles */
	style?: React.CSSProperties;
}

// --- Component ---

export function EdgeLabel({ label, x, y, onClick, className, style }: EdgeLabelProps) {
	if (!label) return null;

	return (
		<div
			className={className}
			onClick={(e) => {
				e.stopPropagation();
				onClick?.();
			}}
			style={{
				position: 'absolute',
				left: x,
				top: y,
				transform: 'translate(-50%, -50%)',
				padding: '2px 8px',
				fontSize: '12px',
				fontWeight: 500,
				color: 'var(--canvas-text, #fff)',
				backgroundColor: 'var(--canvas-bg, #1a1a1a)',
				border: '1px solid var(--canvas-border, #333)',
				borderRadius: '4px',
				whiteSpace: 'nowrap',
				cursor: onClick ? 'pointer' : 'default',
				userSelect: 'none',
				pointerEvents: onClick ? 'auto' : 'none',
				...style,
			}}
		>
			{label}
		</div>
	);
}
