import React, { ReactNode, MouseEvent } from "react";
import { SemanticColor } from "../../../utils/colorUtils";
export type BadgeVariant = "filled" | "outline" | "soft";
export type BadgeColor = SemanticColor;
export type BadgeSize = "sm" | "md";
/**
 * Theme configuration for Badge component
 */
export interface BadgeTheme {
    /**
     * Base styles applied to all badge variants
     */
    baseStyle: string;
    /**
     * Styles for each badge variant (visual appearance)
     */
    variants: Record<BadgeVariant, string>;
    /**
     * Styles for each badge variant-color combination
     * Organized as variantColors[variant][color] for reliable dark mode and className overrides
     */
    variantColors: Record<BadgeVariant, Record<BadgeColor, string>>;
    /**
     * Styles for each badge size (flat structure)
     */
    sizes: Record<BadgeSize, string>;
    /**
     * Additional padding for pill-shaped badges
     */
    pillSizes: Record<BadgeSize, string>;
    /**
     * Icon sizes for each badge size
     */
    iconSizes: Record<BadgeSize, string>;
    /**
     * Avatar sizes for each badge size
     */
    avatarSizes: Record<BadgeSize, string>;
    /**
     * Dismiss icon sizes (button sizes itself from icon + padding)
     */
    dismissSizes: Record<BadgeSize, string>;
    /**
     * Color styles for dot indicators
     */
    dotColors: Record<BadgeColor, string>;
    /**
     * State styles (disabled, hover, selected)
     */
    states: {
        disabled: string;
        hover: string;
    };
}
/**
 * Theme overrides for Badge component
 */
export interface BadgeThemeOverrides {
    baseStyle?: string;
    variants?: Partial<Record<BadgeVariant, string>>;
    variantColors?: Partial<Record<BadgeVariant, Partial<Record<BadgeColor, string>>>>;
    sizes?: Partial<Record<BadgeSize, string>>;
    pillSizes?: Partial<Record<BadgeSize, string>>;
    iconSizes?: Partial<Record<BadgeSize, string>>;
    avatarSizes?: Partial<Record<BadgeSize, string>>;
    dismissSizes?: Partial<Record<BadgeSize, string>>;
    dotColors?: Partial<Record<BadgeColor, string>>;
    states?: Partial<{
        disabled: string;
        hover: string;
    }>;
}
export interface BadgeProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "inputMode"> {
    /**
     * The content to be displayed inside the badge
     */
    children: ReactNode;
    /**
     * The visual style variant of the badge (filled, outline, soft)
     * @default 'filled'
     */
    variant?: BadgeVariant;
    /**
     * The semantic color of the badge (primary, success, danger, etc.)
     * @default 'default'
     */
    color?: BadgeColor;
    /**
     * The size of the badge
     * @default 'md'
     */
    size?: BadgeSize;
    /**
     * Whether the badge is pill-shaped (fully rounded)
     * @default false
     */
    pill?: boolean;
    /**
     * Whether the badge has a dot indicator
     * Note: Icon and avatar take precedence over dot
     * @default false
     */
    withDot?: boolean;
    /**
     * Icon element at the start (before content)
     * Note: Avatar takes precedence over icon
     */
    iconStart?: ReactNode;
    /**
     * Avatar configuration (mutually exclusive with icon)
     * Takes precedence over icon and dot
     */
    avatar?: {
        src?: string;
        name: string;
        fallback?: ReactNode;
        initialsCount?: number;
    };
    /**
     * Whether the badge is dismissible (shows close button)
     * @default false
     */
    dismissible?: boolean;
    /**
     * Callback when close button is clicked
     * Required when dismissible is true
     */
    onDismiss?: (event: MouseEvent<HTMLButtonElement>) => void;
    /**
     * Whether the badge is disabled
     * @default false
     */
    disabled?: boolean;
    /**
     * Maximum width before truncating the label
     * Accepts CSS width value (e.g., '100px', '10rem') or number (pixels)
     */
    maxWidth?: string | number;
    /**
     * Custom class name for the badge
     */
    className?: string;
    /**
     * Component-level theme overrides
     */
    theme?: BadgeThemeOverrides;
    /**
     * Force dark mode styling for the component. Use when placing the component
     * on a dark background while the page is in light mode. This applies the
     * 'dark' class to the container, making text, borders, and other elements
     * use light colors for visibility.
     * @default false
     */
    darkMode?: boolean;
}
