/**
 * ContextMenuAction
 *
 * Renders a single action row inside a context menu.
 * 48px minimum touch target (Apple HIG), icon + label, destructive styling.
 *
 * Extracted from NodeContextMenu.tsx in v1.5.0.
 *
 * @since 1.5.0
 */

import React from 'react';

// --- Types ---

export interface ContextMenuActionProps {
	/** Display label */
	label: string;
	/** Icon element */
	icon?: React.ReactNode;
	/** Action handler */
	onClick: () => void;
	/** Destructive action (red text) */
	destructive?: boolean;
	/** Disabled state */
	disabled?: boolean;
}

// --- Component ---

export function ContextMenuAction({
	label,
	icon,
	onClick,
	destructive = false,
	disabled = false,
}: ContextMenuActionProps) {
	return (
		<button
			onClick={onClick}
			disabled={disabled}
			style={{
				width: '100%',
				minHeight: '48px',
				padding: '12px 16px',
				display: 'flex',
				alignItems: 'center',
				gap: '12px',
				background: 'none',
				border: 'none',
				borderRadius: '8px',
				cursor: disabled ? 'not-allowed' : 'pointer',
				opacity: disabled ? 0.5 : 1,
				color: destructive ? '#ef4444' : 'var(--canvas-text, #fff)',
				fontSize: '16px',
				textAlign: 'left',
				touchAction: 'manipulation',
				WebkitTapHighlightColor: 'transparent',
			}}
			onPointerEnter={(e) => {
				if (!disabled) {
					e.currentTarget.style.backgroundColor = destructive
						? 'rgba(239, 68, 68, 0.1)'
						: 'rgba(255, 255, 255, 0.1)';
				}
			}}
			onPointerLeave={(e) => {
				e.currentTarget.style.backgroundColor = 'transparent';
			}}
		>
			{icon && <span style={{ display: 'flex' }}>{icon}</span>}
			<span>{label}</span>
		</button>
	);
}
