import React from 'react';
import { Title, Counter } from '@pulse/ui/components/Title';
import ActionBlock from './ActionBlock/ActionBlock';
import { IconsSizes, TITLE_SIZE } from "../../globalStyled";
import { TitleInnerDiv, TitleHeightDiv, PlusCircleIconSVG } from './styled';
export const TitleBlock = React.forwardRef((props, ref) => {
    const { size = TITLE_SIZE.H1, isActive = false, isTab = false, withPlusButton, iconSize = IconsSizes.medium, plusButtonClick, children, counter, } = props;
    return (React.createElement(Title, Object.assign({ "$size": size, "$isTab": isTab, "$isActive": isActive, ref: ref }, props),
        React.createElement(TitleInnerDiv, null,
            children,
            !!counter && (React.createElement(TitleHeightDiv, null,
                React.createElement(Counter, null, counter))),
            withPlusButton && (React.createElement(TitleHeightDiv, null,
                React.createElement(ActionBlock, { size: size, plusButtonClick: plusButtonClick },
                    React.createElement(PlusCircleIconSVG, { iconsize: iconSize })))))));
});
