"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.UnavailableAnnouncementBubble = void 0;
var React = require("react");
var cx = require("classnames");
var __1 = require("../");
var darkColorThemeIcon = require("./megaphone-slash-darkColorTheme.svg");
var lightColorThemeIcon = require("./megaphone-slash-lightColorTheme.svg");
require("./UnavailableAnnouncementBubble.less");
function cssClass(element) {
    return "UnavailableAnnouncementBubble--" + element;
}
function cssClassWithColorTheme(element, colorTheme) {
    return [
        "UnavailableAnnouncementBubble--" + element,
        "UnavailableAnnouncementBubble--" + element + "--" + colorTheme,
    ];
}
exports.UnavailableAnnouncementBubble = function (_a) {
    var className = _a.className, colorTheme = _a.colorTheme, unavailableNoticeHeader = _a.unavailableNoticeHeader, unavailableNoticeText = _a.unavailableNoticeText;
    // The light colorTheme icon is reused for the white colorTheme as well.
    var icon = colorTheme === "dark" ? darkColorThemeIcon : lightColorThemeIcon;
    return (React.createElement(__1.FlexBox, { grow: true, alignItems: "center", justify: "start", className: cx(cssClassWithColorTheme("container", colorTheme), className) },
        React.createElement("img", { alt: "", className: cssClass("icon"), src: icon }),
        React.createElement("div", { className: cssClass("textContainer") },
            React.createElement("div", { className: cx(cssClassWithColorTheme("header", colorTheme)) }, unavailableNoticeHeader),
            React.createElement("div", { className: cx(cssClassWithColorTheme("text", colorTheme)) }, unavailableNoticeText))));
};
