/**
 * ComboboxOption
 *
 * Individual option row for the NodeTypeCombobox dropdown.
 * Renders icon, label, description with highlight state.
 *
 * Extracted from NodeTypeCombobox.tsx in v1.5.0.
 *
 * @since 1.5.0
 */

import React from 'react';

// --- Types ---

export interface ComboboxOptionProps {
	/** Node type identifier */
	type: string;
	/** Display label */
	label: string;
	/** Optional icon or emoji */
	icon?: string;
	/** Optional description */
	description?: string;
	/** Whether this option is currently highlighted */
	highlighted?: boolean;
	/** Click handler */
	onClick: () => void;
	/** Mouse enter handler (for highlight tracking) */
	onMouseEnter: () => void;
}

// --- Styles ---

const styles: Record<string, React.CSSProperties> = {
	option: {
		display: 'flex',
		alignItems: 'center',
		gap: '8px',
		padding: '8px 12px',
		cursor: 'pointer',
		transition: 'background-color 0.1s',
	},
	optionHighlighted: {
		backgroundColor: '#f0f0f0',
	},
	icon: {
		fontSize: '16px',
		width: '20px',
		textAlign: 'center',
	},
	content: {
		display: 'flex',
		flexDirection: 'column',
		gap: '2px',
	},
	label: {
		fontSize: '14px',
		fontWeight: 500,
	},
	description: {
		fontSize: '12px',
		color: '#666',
	},
};

// --- Component ---

export function ComboboxOption({
	type,
	label,
	icon,
	description,
	highlighted = false,
	onClick,
	onMouseEnter,
}: ComboboxOptionProps) {
	return (
		<li
			onClick={onClick}
			onMouseEnter={onMouseEnter}
			style={{
				...styles.option,
				...(highlighted ? styles.optionHighlighted : {}),
			}}
			role="option"
			aria-selected={highlighted}
		>
			{icon && <span style={styles.icon}>{icon}</span>}
			<div style={styles.content}>
				<span style={styles.label}>{label}</span>
				{description && <span style={styles.description}>{description}</span>}
			</div>
		</li>
	);
}
