import { Box, Text } from '@wix/design-system';
import React, { useEffect, useRef } from 'react';
import { observer } from 'mobx-react-lite';
import { classes, st } from './TabsFilter.st.css.js';
function _TabTitle({ tabIndex, state, text, value, active, counterBadge, }) {
    const badge = counterBadge?.(value);
    const badgeRef = useRef();
    useEffect(() => {
        if (badgeRef.current) {
            state.badges.set(tabIndex, badgeRef.current);
        }
        return () => {
            state.badges.delete(tabIndex);
        };
    }, [badgeRef.current]);
    return (React.createElement(Box, { className: st(classes.root, { selected: !!active }), dataHook: "tabs-filter-tab-title", verticalAlign: "middle", align: "center" },
        React.createElement(Box, { maxWidth: state.itemMaxWidth, flexShrink: 1, minWidth: 0 },
            React.createElement(Text, { className: st(classes.title), dataHook: "title-text", ellipsis: true }, text)),
        badge && (React.createElement(Box, { dataHook: "title-badge", marginLeft: `${state.itemBadgeMargin}px` },
            React.createElement("div", { ref: (node) => {
                    if (node) {
                        badgeRef.current = node;
                    }
                } }, badge)))));
}
export const TabTitle = observer(_TabTitle);
//# sourceMappingURL=TabTitle.js.map