import { __assign } from "tslib";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import cx from 'classnames';
import { DEFAULT_WIDTH } from '../constants';
import ProgressInfo from './ProgressInfo';
var LineProgress = function (props) {
    var format = props.format, width = props.width, percent = props.percent, showInfo = props.showInfo, strokeWidth = props.strokeWidth, bgColor = props.bgColor, color = props.color, state = props.state, strokeLinecap = props.strokeLinecap;
    var progressWidth = width || DEFAULT_WIDTH.LINE;
    var progressInfo = showInfo && (_jsx("div", __assign({ className: "zent-progress-info", "data-zv": 'v10.0.11' }, { children: _jsx(ProgressInfo, { type: "line", percent: percent, format: format, state: state, color: color }, void 0) }), void 0));
    return (_jsxs("div", __assign({ className: "zent-progress-container", "data-zv": 'v10.0.11' }, { children: [_jsx("div", __assign({ className: cx('zent-progress-wrapper', "zent-progress-wrapper--" + strokeLinecap, {
                    'zent-progress-wrapper--finished': percent === 100,
                }), style: {
                    background: bgColor,
                    width: progressWidth,
                    height: strokeWidth,
                }, "data-zv": 'v10.0.11' }, { children: _jsx("div", { className: "zent-progress-inner", style: {
                        background: color,
                        width: percent + "%",
                        height: strokeWidth,
                    }, "data-zv": 'v10.0.11' }, void 0) }), void 0), progressInfo] }), void 0));
};
export default LineProgress;
