import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
import AutoTruncateText from '../AutoTruncateText/AutoTruncateText.js';
import Typography from '../Typography/Typography.js';
import { checkEmpty } from '../../utils/checkEmpty/checkEmpty.js';
import { ffid } from '../../utils/ffID/ffid.js';

const ChipWithCount = ({ labelsList = [], height = '', }) => {
    const tooltipId = ffid();
    const getRemainingLabels = (jsx("div", { className: "ff-chip-tooltip", children: labelsList
            .filter((_, index) => index > 0)
            .map((labels, index) => (jsx(Typography, { as: "div", className: "ff-chip-tooltip-label", children: labels }, `label-${index}-${labels}`))) }));
    return (jsx(Fragment, { children: !checkEmpty(labelsList) && (jsxs("div", { className: "ff-chip-with-count-container", children: [jsx(Typography, { as: "div", fontWeight: "medium", className: "ff-chip-label", style: height ? { height } : undefined, children: jsx(AutoTruncateText, { children: labelsList[0] || '' }) }), labelsList.length > 1 && (jsxs(Fragment, { children: [jsxs(Typography, { as: "div", className: "ff-chip-count", "data-tooltip-id": `tooltip-${tooltipId}`, fontWeight: "medium", children: ["+", labelsList.length - 1] }), jsx("div", { id: `tooltip-${tooltipId}`, className: "ff-chip-tooltip-template", children: jsx(Typography, { as: "div", children: getRemainingLabels }) })] }))] })) }));
};

export { ChipWithCount as default };
//# sourceMappingURL=ChipWithCount.js.map
