import * as React from 'react';
import { Box, Flex } from '../../../../../components/Flex';
const getText = (options) => {
    let text = '';
    if (options && options.includes('CellValue')) {
        text += '20';
    }
    if (options && options.includes('PercentageValue')) {
        text += ' (50%)';
    }
    return text.trim();
};
export const PercentBarStylePreview = (props) => {
    const cellText = getText(props.cellText);
    const tooltip = getText(props.toolTipText);
    return (React.createElement(Box, { title: tooltip, className: "twa:flex-1" },
        React.createElement(Flex, { style: { backgroundColor: props.backgroundColor }, className: `twa:flex-1 ${cellText ? 'twa:h-[8px]' : 'twa:h-[18px]'}` },
            React.createElement(Box, { className: "twa:basis-[50%]", style: { background: props.barBackgroundColor } })),
        cellText && React.createElement(Box, { className: "twa:text-3" }, cellText)));
};
