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

//#region src/SvgIcon/SvgIcon.types.d.ts
declare const svgIconTypes: readonly ["theme", "white", "dark-gray", "darkish-gray", "gray", "color", "info", "text", "warning", "inherit", "danger", "theme-light", "success", "default"];
type SvgIconType = (typeof svgIconTypes)[number];
/**
 * Props for the SvgIcon component that renders SVG-based icons with various styling options.
 * Extends TooltipComponentProps to support tooltip functionality on the icon.
 * Similar to Icon component but specifically for SVG icons instead of font icons.
 */
type SvgIconProps = {
  /**
   * SVG icon identifier or class name to display.
   * This should correspond to an available SVG icon in your icon system.
   * Examples: 'fc-zoom', 'fc-delete', 'custom-arrow'.
   */
  icon: string;
  /**
   * Visual style type that determines the icon's color and appearance:
   * - `default`: Uses automatic dark/light text colors based on theme
   * - `theme`: Uses primary theme colors
   * - `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 'default'
   */
  type?: SvgIconType;
  /**
   * 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 SVG icon element.
   * Use this to customize the icon's appearance, spacing, or behavior beyond built-in options.
   */
  extraClassNames?: string;
  /**
   * HTML ID attribute for the SVG icon element.
   * Should be unique across the page for proper HTML semantics and accessibility.
   */
  id?: string;
  /**
   * Test ID attribute for the SVG 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;
  /**
   * SVG viewBox attribute that defines the coordinate system and aspect ratio.
   * Format: "min-x min-y width height" (e.g., "0 0 24 24").
   * If not provided, uses the default viewBox from the SVG definition.
   * Use this to crop or scale the icon's visible area.
   */
  viewBox?: string;
} & TooltipComponentProps;
//#endregion
export { SvgIconProps, SvgIconType, svgIconTypes };