import { jsx, jsxs } from 'react/jsx-runtime';
import Icon from '../Icon/Icon.js';
import Tooltip from '../Tooltip/Tooltip.js';
import Typography from '../Typography/Typography.js';
import { capitalize } from '../../utils/capitalize/capitalize.js';

const StatusBadge = ({ gap = 8, fontSize = 12, entityType, statusValues, }) => {
    const getIconNameForResults = (iconProp) => {
        if (iconProp === 'passed')
            return 'pass_result_icon';
        if (iconProp === 'failed')
            return 'fail_result_icon';
        if (iconProp === 'warning')
            return 'warning_result_icon';
        return 'skipped_result_icon';
    };
    const formatValue5Digit = (num) => {
        if (Number.isInteger(num))
            return String(num);
        const [intPart, decPart = ''] = String(num).split('.');
        let decimals = '';
        if (intPart?.length === 1) {
            decimals = decPart.slice(0, 4).padEnd(4, '0');
        }
        else if (intPart?.length === 2) {
            decimals = decPart.slice(0, 3).padEnd(3, '0');
        }
        else {
            decimals = decPart.slice(0, 2).padEnd(2, '0');
        }
        return `${intPart}.${decimals}`;
    };
    return (jsx("div", { className: "ff-statusbadge-container", style: {
            gap: `${gap}px`,
        }, children: statusValues.map((val, idx) => (jsx(Tooltip, { title: `${capitalize(val?.status)}${entityType ? ` ${entityType}` : ''} : ${formatValue5Digit(val?.value)}`, zIndex: 1000, children: jsxs("div", { className: "ff-statusbadge-item", children: [jsx(Icon, { name: getIconNameForResults(val?.status?.toLowerCase()) }), jsx(Typography, { fontSize: fontSize, children: formatValue5Digit(val?.value) })] }) }, `${idx}-${val}`))) }));
};

export { StatusBadge as default };
//# sourceMappingURL=StatusBadge.js.map
