"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.PercentBarPreview = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const PercentBarStylePreview_1 = require("./PercentBarStylePreview");
const Flex_1 = require("../../../../../components/Flex");
const PercentBarPreview = (props) => {
    let postfix = '';
    if (props.percentBarStyle.RangeValueType === 'Percentage') {
        postfix = '%';
    }
    return (React.createElement(React.Fragment, null, props.percentBarStyle.CellRanges.map((range, i) => (React.createElement(Flex_1.Flex, { key: i, alignItems: "stretch", className: "twa:mr-3 twa:mb-2" },
        React.createElement(Flex_1.Flex, { className: "twa:basis-[120px] twa:mr-3", alignItems: "center" },
            range.Min,
            postfix,
            " to ",
            range.Max,
            postfix),
        React.createElement(PercentBarStylePreview_1.PercentBarStylePreview, { backgroundColor: props.percentBarStyle.BackColor, barBackgroundColor: range.Color, cellText: props.percentBarStyle.CellText, toolTipText: props.percentBarStyle.ToolTipText }))))));
};
exports.PercentBarPreview = PercentBarPreview;
