import React from 'react';
import i18n from 'ui-i18n';
import CloseIcon from '@mui/icons-material/Close';
import Typography from '@mui/material/Typography';
import Divider from '@mui/material/Divider';
import { SmallIconButtonWithTooltip } from '../SmallIconButton';
import { useStyles } from './styles';
export var SidePanelContentHeader = function (_a) {
    var onClose = _a.onClose, mainTitle = _a.mainTitle, secondTitle = _a.secondTitle, content = _a.content, rightContent = _a.rightContent;
    var styles = useStyles();
    return (React.createElement("div", { className: styles.container },
        React.createElement(SmallIconButtonWithTooltip, { size: "L", icon: CloseIcon, onClick: onClose, className: styles.icon, tooltipTitle: i18n.text('Close') }),
        content || (React.createElement(React.Fragment, null,
            React.createElement(Typography, { "data-reltio-id": "content-header-title", variant: "h6" }, mainTitle),
            secondTitle && (React.createElement(React.Fragment, null,
                React.createElement(Divider, { "data-reltio-id": "content-header-divider", orientation: "vertical", flexItem: true, className: styles.divider }),
                React.createElement(Typography, { variant: "body1", color: "textSecondary", className: styles.secondTitle }, secondTitle))),
            rightContent))));
};
