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

//#region src/Alert/Alert.types.d.ts
type Props = {
  /**
   * The content to be displayed inside the alert message.
   * Can include text, icons, buttons, or any other React elements.
   * This is the main message or information you want to communicate to the user.
   */
  children: React.ReactNode;
  /**
   * When true, displays a close button (X icon) that allows users to dismiss the alert.
   * When false, the alert cannot be closed by the user and must be controlled programmatically.
   * @default true
   */
  dismissible?: boolean;
  /**
   * Callback function triggered when the user clicks the close button to dismiss the alert.
   * Only relevant when `dismissible` is true. Use this to handle alert dismissal logic,
   * such as updating state to hide the alert or performing cleanup actions.
   */
  onClose?: () => void;
  /**
   * Controls the visibility of the alert component.
   * When false, the alert is completely hidden from the UI.
   * Use this for programmatic control of when alerts should appear or disappear.
   * @default true
   */
  show?: boolean;
  /**
   * The visual style variant of the alert, which determines its appearance and color scheme:
   * - `danger`: Red styling for error messages or critical warnings
   * - `warning`: Yellow/orange styling for caution messages
   * - `gray`: Neutral gray styling for general information
   * - `theme`: Uses the current theme colors for contextual information
   */
  variant: 'danger' | 'theme' | 'warning' | 'gray' | 'formulaError';
  /**
   * Test ID attribute for the alert container element.
   * Used for automated testing and element selection in test suites.
   * Also used as a prefix for the close button's test ID when dismissible.
   * @default 'alert-id'
   */
  testId?: string;
  /**
   * HTML ID attribute for the alert container element.
   * Should be unique across the entire page for proper HTML semantics.
   * Useful for accessibility, linking, or custom styling via CSS selectors.
   */
  id?: string;
  /**
   * Additional CSS classes to apply to the alert container.
   * Use this to customize the alert's appearance beyond the built-in variants.
   * Classes are combined with the component's default styling.
   */
  extraClassNames?: string;
};
/**
 * Combined props for the Alert component.
 * Includes all Alert-specific properties plus tooltip functionality
 * inherited from TooltipComponentProps for enhanced user interaction.
 */
type AlertProps = Props & TooltipComponentProps;
//#endregion
export { AlertProps };