import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import Box from '../box';
import Button from '../button';
import { useStyleConfig, vui } from '../core';
import Icon from '../icon';
import T from '../t';
import { cs } from '../utils';
const Content = ({ number, variant, size }) => {
    if (typeof number === 'undefined')
        return null;
    if (variant === 'completed')
        return _jsx(Icon, { name: "falCheck", size: size });
    if (variant === 'error')
        return _jsx(Icon, { name: "falTimes", size: size });
    return (_jsx(T, { fontSize: size === 'md' ? 16 : 14, fontWeight: 600, children: number }));
};
/**
 * Implements stepper indicator **
 */
export const StepIndicator = vui((props, ref) => {
    const { icon, number, className, size = 'md', variant = 'active', ...rest } = props;
    const styles = useStyleConfig('StepIndicator', props);
    return icon ? (_jsx(Button, { className: cs('vui-stepIndicator', 'vui-stepIndicatorIcon', className), icon: icon, ref: ref, ...styles.icon, ...rest, isRound: true, minW: "auto", pointerEvents: "none", size: size })) : (_jsxs(Button, { className: cs('vui-stepIndicator', 'vui-stepIndicatorNumber', className), ref: ref, ...styles.button, ...rest, isRound: true, minW: "auto", outline: "6px solid white", pointerEvents: "none", position: "relative", size: size, children: [_jsx(Box, { mx: 0.5, position: "relative" }), _jsx(Box, { mx: 0.5, position: "absolute", children: _jsx(Content, { number: number, size: String(size), variant: String(variant) }) })] }));
});
StepIndicator.displayName = 'StepIndicator';
export default StepIndicator;
//# sourceMappingURL=stepIndicator.js.map