import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import cx from "classnames";
import { QuestionMark } from "../../Icon/icons/QuestionMark.js";
import { ShortenedText } from "../../ShortenedText/ShortenedText.js";
import { Typography } from "../../Typography/Typography.js";
import { UiIconButton } from "../UiIconButton/UiIconButton.js";
import { UiTooltip } from "../UiTooltip/UiTooltip.js";
/**
 * Unified submenu header: optional back button, title, and optional close button.
 * Title can render as Typography h3 or ShortenedText h3.
 * @internal
 */
export function UiSubmenuHeader({ title = "", tooltipText, onBack, onClose, backAriaLabel, closeAriaLabel, useShortenedTitle, textColor, backgroundColor, height = "medium", titleId, }) {
    const heightClass = cx({
        "gd-ui-kit-submenu-header--large": height === "large",
        "gd-ui-kit-submenu-header--medium": height === "medium",
    });
    const backButtonSize = "small";
    const closeButtonSize = "small";
    return (_jsxs("div", { className: cx("gd-ui-kit-submenu-header", heightClass), style: { backgroundColor: backgroundColor, color: textColor }, children: [onBack ? (_jsx(UiIconButton, { icon: "navigateLeft", variant: "bare", size: backButtonSize, onClick: onBack, label: backAriaLabel, dataId: "s-submenu-header-back-button", dataTestId: "s-submenu-header-back-button" })) : null, _jsxs("div", { className: cx("gd-ui-kit-submenu-header__title"), "data-testid": "drill-filters-section", children: [useShortenedTitle ? (_jsx(ShortenedText, { tagName: "h3", className: cx("gd-ui-kit-submenu-header__title-text"), id: titleId, children: title })) : (_jsx(Typography, { tagName: "h3", className: cx("gd-ui-kit-submenu-header__title-text"), id: titleId, children: title })), tooltipText ? (_jsx(UiTooltip, { triggerBy: ["hover", "focus"], arrowPlacement: "left", optimalPlacement: true, content: _jsx("div", { className: "gd-ui-kit-submenu-header__title-tooltip-content", children: tooltipText }), anchor: _jsx(QuestionMark, { className: "gd-ui-kit-submenu-header__title-tooltip-icon", width: 14, height: 14, color: "var(--gd-palette-complementary-6)" }), offset: 10, anchorWrapperStyles: { lineHeight: 0, width: "fit-content" } })) : null] }), onClose ? (_jsx(UiIconButton, { size: closeButtonSize, variant: "bare", icon: "close", label: closeAriaLabel, onClick: onClose, dataId: "s-submenu-header-close-button", dataTestId: "s-submenu-header-close-button" })) : null] }));
}
