/**
 * ContextMenuDivider
 *
 * Section header / divider for context menus.
 * Renders a bordered header with a label.
 *
 * Extracted from NodeContextMenu.tsx in v1.5.0.
 *
 * @since 1.5.0
 */

import React from 'react';

export interface ContextMenuDividerProps {
	/** Section label text */
	label?: string;
}

export function ContextMenuDivider({ label }: ContextMenuDividerProps) {
	return (
		<div
			style={{
				padding: label ? '8px 12px' : '0',
				borderBottom: '1px solid var(--canvas-border, #333)',
				marginBottom: '4px',
			}}
		>
			{label && (
				<div
					style={{
						fontSize: '14px',
						fontWeight: 500,
						color: 'var(--canvas-text, #fff)',
					}}
				>
					{label}
				</div>
			)}
		</div>
	);
}
