import type { Component } from 'vue';

/**
 * Visual style variants for UiButton.
 */
export type UiButtonVariant =
  | 'default'
  | 'destructive'
  | 'outline'
  | 'secondary'
  | 'ghost'
  | 'link';

/**
 * Size variants for UiButton.
 *
 * Any size starting with `icon` switches the button into icon-only mode
 * (renders the slot content only, no label, no start/end icons).
 */
export type UiButtonSize =
  | 'default'
  | 'sm'
  | 'lg'
  | 'icon'
  | 'icon-xs'
  | 'icon-sm'
  | 'icon-lg'
  | 'icon-sm-no-padding';

/**
 * A clickable button component for triggering actions and submitting forms.
 * @category Actions
 * @useCases form submission, call to action, trigger modal, navigation link, toolbar action
 * @keywords button, click, submit, action, cta, interactive
 * @related UiLink
 */
export interface UiButtonProps {
  /**
   * The visual style of the button.
   * @default 'default'
   */
  variant?: UiButtonVariant;

  /**
   * The size of the button.
   * @default 'default'
   */
  size?: UiButtonSize;

  /**
   * Whether to render as a child (Slot) instead of a wrapper element.
   * Useful for tooltips or wrapping other components.
   * @default false
   */
  asChild?: boolean;

  /**
   * The native button type.
   * @default 'button'
   */
  type?: 'button' | 'submit' | 'reset';

  /**
   * Disables the button.
   */
  disabled?: boolean;

  /**
   * Shows a loading state and prevents interaction.
   */
  loading?: boolean;

  /**
   * Accessible label for the button.
   * Optional for standard buttons as they usually have visible text.
   */
  ariaLabel?: string;

  /**
   * Icon component to display before the button text.
   * Hidden when loading is true.
   * @example
   * ```vue
   * <UiButton :startIcon="ChevronLeft">Back</UiButton>
   * ```
   */
  startIcon?: Component;

  /**
   * Icon component to display after the button text.
   * @example
   * ```vue
   * <UiButton :endIcon="ChevronRight">Next</UiButton>
   * ```
   */
  endIcon?: Component;
}
