import { TooltipComponentProps } from "../Tooltip/Tooltip.types.js";
import { ButtonProps } from "../Button/Button.types.js";

//#region src/ButtonGroup/ButtonGroup.types.d.ts

/**
 * Interface representing the properties for a button within a ButtonGroup.
 * Used when you want to include an interactive button as part of the group.
 */
type AppendedButtonProps = {
  /**
   * Specifies that this group item is a clickable button.
   * Button items can be selected, have active states, and trigger onChange events.
   */
  variant: 'button';
  /**
   * Configuration properties for the button component.
   * Omits the onClick handler since ButtonGroup manages selection internally.
   * Requires a value for selection tracking and optionally an isActive state.
   */
  buttonProps: Omit<ButtonProps, 'onClick'> & {
    /** Unique value used to identify this button when selected */
    value: string;
    /** Whether this button is currently in the active/selected state */
    isActive?: boolean;
  };
};
/**
 * Interface for including custom React elements within a ButtonGroup.
 * Used when you need to add non-button content like separators, labels, or custom components.
 */
type ElementProps = {
  /**
   * Specifies that this group item is a custom React element.
   * Element items are purely presentational and don't participate in selection logic.
   */
  variant: 'element';
  /**
   * The React content to render within the button group.
   * Can be any valid React node including text, icons, separators, or complex components.
   */
  element: React.ReactNode;
  /**
   * Additional CSS classes to apply to the element's container.
   * Use this to style the element consistently with the button group's appearance.
   */
  extraClassNames?: string;
};
type Props = AppendedButtonProps | ElementProps | undefined;
/**
 * Props for the ButtonGroup component that creates a cohesive group of related buttons.
 * Extends TooltipComponentProps to support tooltip functionality on the entire group.
 */
type ButtonGroupProps = {
  /**
   * Array of items to display in the button group.
   * Each item can be either a button (for interactive elements) or an element (for decorative content).
   * Buttons within the group share consistent styling and spacing for a unified appearance.
   */
  buttons: Props[];
  /**
   * HTML ID attribute for the button group container.
   * Should be unique across the page for proper HTML semantics and accessibility.
   */
  id?: string;
  /**
   * Additional CSS classes to apply to the button group container.
   * Use this to customize the group's appearance, spacing, or layout beyond default styling.
   */
  extraClassNames?: string;
  /**
   * Callback function triggered when a button within the group is selected.
   * Receives the value of the selected button as defined in its buttonProps.value.
   * Use this to handle selection changes and update your application state.
   */
  onChange?: (value: string) => void;
  /**
   * Test ID attribute for the button group container used in automated testing.
   * Applied to the group's root element for test targeting and interaction.
   */
  testId?: string;
} & TooltipComponentProps;
//#endregion
export { ButtonGroupProps };