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

//#region src/Icon/Icon.types.d.ts
declare const iconTypes: readonly ['theme', 'white', 'dark-gray', 'darkish-gray', 'gray', 'color', 'info', 'text', 'warning', 'inherit', 'danger', 'theme-light', 'success'];
type IconType = (typeof iconTypes)[number];
type IconSize = '2xs' | 'xs' | 'sm' | 'lg' | 'xl' | '2xl' | '1x' | '2x' | '3x' | '4x' | '5x' | '6x' | '7x' | '8x' | '9x' | '10x';
/**
 * Props for the Icon component that renders customizable icons with various styling options.
 * Extends TooltipComponentProps to support tooltip functionality on the icon.
 */
type IconProps = {
  /**
   * Icon class name to display, typically from FontAwesome.
   * Examples: 'fc-zoom', 'fc-delete', 'fc-save'. This determines which icon is rendered.
   */
  icon: string;
  /**
   * Custom prefix for the icon class when not using standard FontAwesome icons.
   * By default, icons are prefixed with 'fa-sharp fa-regular', but some icons
   * from different icon sets require specific prefixes. Use this to override the default.
   */
  iconPrefix?: string;
  /**
   * Visual style type that determines the icon's color and appearance:
   * - `theme`: Uses primary theme colors (default)
   * - `white`: Pure white color
   * - `text`: Uses standard text color
   * - `dark-gray`: Dark gray color
   * - `darkish-gray`: Medium-dark gray color
   * - `gray`: Standard gray color
   * - `color`: Uses custom color specified in `color` prop
   * - `info`: Blue informational color
   * - `warning`: Yellow/orange warning color
   * - `danger`: Red error/danger color
   * - `success`: Green success color
   * - `theme-light`: Lighter version of theme color
   * - `inherit`: Inherits color from parent element
   * @default 'theme'
   */
  type?: IconType;
  /**
   * Icon size, mapped to FontAwesome sizing classes so it works for both FA and FontCustom icons.
   * Examples: 'sm', 'lg', 'xl', '2xl', '1x'...'10x', 'xs', '2xs'.
   */
  size?: IconSize;
  /**
   * Custom color value for the icon when `type` is set to 'color'.
   * Can be any valid CSS color (hex, rgb, color names, etc.).
   * This property is required when type is 'color'.
   */
  color?: string;
  /**
   * Callback function triggered when the icon is clicked.
   * Receives the mouse event as a parameter. Use this to make icons interactive
   * for actions like opening menus, triggering functions, or navigation.
   */
  onClick?: (e?: React.MouseEvent<HTMLElement, MouseEvent>) => void;
  /**
   * Additional CSS classes to apply to the icon element.
   * Use this to customize the icon's appearance, spacing, or behavior beyond built-in options.
   */
  extraClassNames?: string;
  /**
   * HTML ID attribute for the icon element.
   * Should be unique across the page for proper HTML semantics and accessibility.
   */
  id?: string;
  /**
   * @deprecated Use `size="lg"` instead.
   */
  large?: boolean;
  /**
   * @deprecated Use `size="sm"` instead.
   */
  small?: boolean;
  /**
   * Test ID attribute for the icon element used in automated testing.
   * Applied to the `data-testid` attribute for element selection in test suites.
   */
  testId?: string;
  /**
   * Custom identifier placed in the `data-customid` attribute on the icon element.
   * Useful for identifying the specific icon in event handlers when multiple icons
   * share the same click handler. Helps distinguish which icon was clicked.
   */
  customId?: string;
  /**
   * Numeric value associated with the icon, purpose depends on specific use case.
   * Can be used for ordering, counting, or any numeric data related to the icon.
   */
  number?: number;
} & TooltipComponentProps;
//#endregion
export { IconProps, IconSize, IconType, iconTypes };