import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useIntl } from "react-intl";
import { commonDialogMessages } from "../../locales.js";
import { bem } from "../@utils/bem.js";
import { UiIconButton } from "../UiIconButton/UiIconButton.js";
import { useUiDialogContext } from "./UiModalDialog.js";
const { b, e } = bem("gd-ui-kit-dialog-header");
/**
 * Dialog header: optional leading slot + title + optional close X.
 *
 * @internal
 */
export function UiDialogHeader({ title, titleSize = "default", onClose, leading }) {
    const intl = useIntl();
    const dialogContext = useUiDialogContext();
    return (_jsxs("div", { className: b(), children: [leading ? _jsx("span", { className: e("leading"), children: leading }) : null, _jsx("h2", { id: dialogContext?.titleId, className: e("title", { size: titleSize }), children: title }), onClose ? (_jsx(UiIconButton, { icon: "cross", variant: "tertiary", size: "small", onClick: onClose, accessibilityConfig: {
                    ariaLabel: intl.formatMessage(commonDialogMessages.close),
                } })) : null] }));
}
