import React from 'react';
import { st, classes, cssStates } from '../VerticalTabsItem.st.css.js';
import { Affix } from './Affix';
import { Text } from '../..';
import { SIZE } from '../../VerticalTabs/VerticalTabs.constants';
import { DATA_HOOKS } from '../VerticalTabsItem.constants';
const TitleItem = ({ children, dataHook, prefixIcon, suffixIcon, size, ellipsis, baseSkin, }) => (React.createElement("div", { className: st(classes.root, classes.title, cssStates({
        size,
        baseSkin,
        suffixIcon: !!suffixIcon,
        prefixIcon: !!prefixIcon,
    })), "data-hook": dataHook },
    React.createElement(Affix, { dataHook: DATA_HOOKS.ITEM_PREFIX_ICON, size: size, className: st(classes.prefixIcon) }, prefixIcon),
    React.createElement(Text, { className: classes.text, ellipsis: ellipsis, light: true, secondary: true, weight: size === SIZE.TINY ? 'bold' : 'thin', size: size === SIZE.MEDIUM ? SIZE.SMALL : size, dataHook: DATA_HOOKS.ITEM_TEXT }, children),
    React.createElement(Affix, { dataHook: DATA_HOOKS.ITEM_SUFFIX_ICON, size: size, className: classes.suffixIcon }, suffixIcon)));
export { TitleItem };
//# sourceMappingURL=TitleItem.js.map