/**
 * Size options for buttons within a button group.
 */
export type VegaButtonGroupSize = 'default' | 'small' | 'large';

/**
 * Visual variant for the entire button group.
 */
export type VegaButtonGroupVariant = 'primary' | 'secondary' | 'tertiary';

/**
 * Alignment of icons within buttons inside the group.
 */
export type VegaButtonGroupIconAlign = 'left' | 'right';

/**
 * Configuration for dropdown menus attached to button groups.
 */
export type DropdownPropsForButtonGroup = {
	/**
	 * Whether the dropdown should match the height of its container.
	 */
	matchContainerHeight?: boolean;
	/**
	 * Whether the dropdown should match the width of its trigger element.
	 */
	matchTargetWidth?: boolean;
	/**
	 * Maximum height of the dropdown in pixels.
	 */
	maxHeight?: number;
	/**
	 * Element selector or reference to position the dropdown.
	 */
	positionRelativeTo?: string;
	/**
	 * Interaction that will open the dropdown.
	 */
	trigger: 'hover' | 'click' | 'none';
};

/**
 * Props used to describe an individual button item in a button group.
 */
export type ButtonItemsProps = {
	/**
	 * Icon name for the button.
	 */
	icon: string;
	/**
	 * Label text for the button.
	 */
	label: string;
	/**
	 * Size of the button.
	 */
	size: VegaButtonGroupSize;
	/**
	 * Icon alignment within the button.
	 */
	iconAlign: VegaButtonGroupIconAlign;
	/**
	 * Whether the button is disabled.
	 */
	disabled: boolean;
	/**
	 * Ref callback for obtaining the element.
	 */
	ref: (node: HTMLElement) => void;
};