import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { FormattedMessage } from "react-intl";
import { Bubble, BubbleHoverTrigger, IconLock } from "@gooddata/sdk-ui-kit";
import { useTheme } from "@gooddata/sdk-ui-theme-provider";
import { gdColorStateBlank } from "../../../constants/colors.js";
/**
 * @alpha
 */
export function LockedStatusIndicator(props) {
    const theme = useTheme();
    if (!props.isLocked) {
        return null;
    }
    return (_jsx("div", { className: "s-locked-status gd-locked-status", children: _jsxs(BubbleHoverTrigger, { children: [
                _jsx(IconLock, { className: "gd-icon-locked", width: 25, height: 24, color: theme?.palette?.complementary?.c6 ?? gdColorStateBlank }), _jsx(Bubble, { alignPoints: [{ align: "bc tl" }], alignTo: `.gd-icon-locked`, children: _jsx(FormattedMessage, { id: "header.lockStatus.tooltip", values: { b: (chunks) => _jsx("b", { children: chunks }) } }) })
            ] }) }));
}
