"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.SidePanelContentHeader = void 0;
var react_1 = __importDefault(require("react"));
var ui_i18n_1 = __importDefault(require("ui-i18n"));
var Close_1 = __importDefault(require("@mui/icons-material/Close"));
var Typography_1 = __importDefault(require("@mui/material/Typography"));
var Divider_1 = __importDefault(require("@mui/material/Divider"));
var SmallIconButton_1 = require("../SmallIconButton");
var styles_1 = require("./styles");
var SidePanelContentHeader = function (_a) {
    var onClose = _a.onClose, mainTitle = _a.mainTitle, secondTitle = _a.secondTitle, content = _a.content, rightContent = _a.rightContent;
    var styles = (0, styles_1.useStyles)();
    return (react_1.default.createElement("div", { className: styles.container },
        react_1.default.createElement(SmallIconButton_1.SmallIconButtonWithTooltip, { size: "L", icon: Close_1.default, onClick: onClose, className: styles.icon, tooltipTitle: ui_i18n_1.default.text('Close') }),
        content || (react_1.default.createElement(react_1.default.Fragment, null,
            react_1.default.createElement(Typography_1.default, { "data-reltio-id": "content-header-title", variant: "h6" }, mainTitle),
            secondTitle && (react_1.default.createElement(react_1.default.Fragment, null,
                react_1.default.createElement(Divider_1.default, { "data-reltio-id": "content-header-divider", orientation: "vertical", flexItem: true, className: styles.divider }),
                react_1.default.createElement(Typography_1.default, { variant: "body1", color: "textSecondary", className: styles.secondTitle }, secondTitle))),
            rightContent))));
};
exports.SidePanelContentHeader = SidePanelContentHeader;
