import { Box, LinearProgressBar, } from '@wix/design-system';
import React, { useMemo, useState } from 'react';
import { Heading } from '../Heading';
export function LinearAbsoluteProgressBar(props) {
    const { dataHook, value, count, total } = props;
    const [formatter] = useState(() => Intl.NumberFormat('en', { notation: 'compact' }));
    const countFormatted = useMemo(() => formatter.format(count), [count]);
    const totalFormatted = useMemo(() => (total != null ? formatter.format(total) : null), [total]);
    return (React.createElement(Box, { verticalAlign: "middle", dataHook: dataHook },
        React.createElement(LinearProgressBar, { value: value }),
        React.createElement(Box, { width: total != null ? '54px' : '24px', minWidth: 0, flexShrink: 0, align: "right" },
            React.createElement(Heading, { size: "extraTiny" },
                React.createElement("span", { "data-hook": "progress-count" }, countFormatted),
                totalFormatted != null && (React.createElement(React.Fragment, null,
                    React.createElement("span", null, "/"),
                    React.createElement("span", { "data-hook": "progress-total" }, totalFormatted)))))));
}
//# sourceMappingURL=LinearAbsoluteProgressBar.js.map