import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import cx from "classnames";
import { ShortenedText } from "../../ShortenedText/ShortenedText.js";
import { Typography } from "../../Typography/Typography.js";
import { UiIconButton } from "../UiIconButton/UiIconButton.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 = "", 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, _jsx("div", { className: cx("gd-ui-kit-submenu-header__title"), 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 })) }), 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] }));
}
//# sourceMappingURL=UiSubmenuHeader.js.map