import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { IconRenderer } from "../../services/iconRenderer";
import "./styles.css";
/**
 * Badge component - used to display labels, statuses, and categorizations
 *
 * @param props - Badge component properties
 * @param props.size - Badge size. Default: "lg"
 * @param props.variant - Visual variant of the badge. Default: "ghost"
 * @param props.scheme - Badge color scheme. Default: "primary"
 * @param props.leftIcon - Optional icon to display on the left
 * @param props.rightIcon - Optional icon to display on the right
 *
 * **...Other valid HTML properties for div**
 *
 * @returns Badge JSX element
 *
 * @example
 * ```tsx
 * // Basic badge
 * <Badge>New</Badge>
 *
 * // Badge with color scheme
 * <Badge scheme="success">Approved</Badge>
 *
 * // Badge with icons
 * <Badge leftIcon={CheckIcon} scheme="success">
 *  Completed
 * </Badge>
 *
 * // Custom badge
 * <Badge
 *  size="lg"
 *  variant="solid"
 *  scheme="warning"
 *  rightIcon={AlertIcon}
 * >
 *  Warning
 * </Badge>
 * ```
 */
function Badge(props) {
    const { variant = "ghost", scheme = "primary", size = "lg", leftIcon, rightIcon, className: baseClassName = "", children, ...rest } = props;
    const iconSizes = { md: 12, lg: 14 };
    const iconSize = iconSizes[size];
    const className = `arkynBadge ${variant} ${scheme} ${size} ${baseClassName}`;
    return (_jsxs("div", { className: className.trim(), ...rest, children: [_jsx(IconRenderer, { iconSize: iconSize, icon: leftIcon }), _jsx("p", { children: children }), _jsx(IconRenderer, { iconSize: iconSize, icon: rightIcon })] }));
}
export { Badge };
