import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Tooltip } from '@gravity-ui/uikit';
import { block } from "../../../utils/cn.js";
import { getProgressColor } from "./utils.js";
import "./ContextIndicator.css";
const b = block('context-indicator');
export const ContextIndicator = (props) => {
    const { className, qa, orientation = 'horizontal', reversed = false, tooltipContent } = props;
    const percentage = props.type === 'number'
        ? Math.round((props.usedContext / props.maxContext) * 100)
        : props.usedContext;
    const clampedPercentage = Math.min(Math.max(percentage, 0), 100);
    const content = (_jsxs("div", { className: b('container', { orientation, reversed }, className), "data-qa": qa, children: [_jsx("div", { className: b('progress'), style: {
                    '--percentage': clampedPercentage,
                    '--progress-color': getProgressColor(clampedPercentage),
                }, children: _jsx("div", { className: b('inner') }) }), _jsx("div", { className: b('value'), children: clampedPercentage })] }));
    if (tooltipContent) {
        return _jsx(Tooltip, { content: tooltipContent, children: content });
    }
    return content;
};
//# sourceMappingURL=index.js.map
