import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import Tooltip from '../Tooltip';
import Typography from '../Typography';
import './ChipWithCount.scss';
import { truncateText } from '../../utils/truncateText/truncateText';
import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
const ChipWithCount = ({ labelsList = [], }) => {
    const getRemainingLabels = (_jsx("div", { className: "ff-chip-tooltip", children: labelsList.map((labels, index) => index > 0 ? (_jsx(Typography, { as: "div", children: labels, className: "ff-chip-tooltip-label" }, index)) : null) }));
    return (_jsx(_Fragment, { children: !checkEmpty(labelsList) && (_jsxs("div", { className: "ff-chip-with-count-container", children: [_jsx(Tooltip, { title: labelsList[0], children: _jsx(Typography, { as: "div", children: truncateText(labelsList[0] || '', 10), className: "ff-chip-label", fontWeight: "medium" }) }), labelsList.length > 1 && (_jsx(Tooltip, { title: _jsx(Typography, { as: "div", children: getRemainingLabels }), children: _jsx(Typography, { as: "div", children: `+${labelsList.length - 1}`, className: 'ff-chip-count', fontWeight: "medium" }) }))] })) }));
};
export default ChipWithCount;
//# sourceMappingURL=ChipWithCount.js.map