import Icon, { ThickProp } from "../Icon/Icon";
import React from "react";
import Tooltip from "../Tooltip/Tooltip";
export var HeaderAlertType;
(function (HeaderAlertType) {
    HeaderAlertType["SUCCESS"] = "Success";
    HeaderAlertType["ERROR"] = "Error";
    HeaderAlertType["WARNING"] = "Warning";
    HeaderAlertType["INFO"] = "Info";
})(HeaderAlertType || (HeaderAlertType = {}));
const HeaderAlert = (props) => {
    let textColor = "text-indigo-600";
    let bgColor = "bg-indigo-50";
    let hoverBgColor = "hover:bg-indigo-100";
    let borderColor = "border-indigo-200";
    switch (props.alertType) {
        case HeaderAlertType.SUCCESS:
            textColor = "text-emerald-600";
            bgColor = "bg-emerald-50";
            hoverBgColor = "hover:bg-emerald-100";
            borderColor = "border-emerald-200";
            break;
        case HeaderAlertType.ERROR:
            textColor = "text-red-600";
            bgColor = "bg-red-50";
            hoverBgColor = "hover:bg-red-100";
            borderColor = "border-red-200";
            break;
        case HeaderAlertType.WARNING:
            textColor = "text-amber-600";
            bgColor = "bg-amber-50";
            hoverBgColor = "hover:bg-amber-100";
            borderColor = "border-amber-200";
            break;
        case HeaderAlertType.INFO:
            textColor = "text-indigo-600";
            bgColor = "bg-indigo-50";
            hoverBgColor = "hover:bg-indigo-100";
            borderColor = "border-indigo-200";
            break;
    }
    // color swatch overrides the color.
    if (props.colorSwatch) {
        textColor = `text-${props.colorSwatch}-600`;
        bgColor = `bg-${props.colorSwatch}-50`;
        hoverBgColor = `hover:bg-${props.colorSwatch}-100`;
        borderColor = `border-${props.colorSwatch}-200`;
    }
    const getElement = () => {
        return (React.createElement("div", { className: `cursor-pointer ${bgColor} ${hoverBgColor} border ${borderColor} mx-1 py-1.5 px-3 rounded-lg transition-all duration-150 ${props.className}`, onClick: () => {
                var _a;
                (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props);
            } },
            React.createElement("div", { className: "flex items-center gap-1.5" },
                React.createElement("div", { className: `flex-shrink-0 ${textColor}` },
                    React.createElement(Icon, { icon: props.icon, thick: ThickProp.Thick, className: `h-4 w-4 stroke-[2.5px] ${textColor}` })),
                React.createElement("div", { className: "flex items-center gap-1" },
                    React.createElement("span", { className: `text-sm font-semibold ${textColor}` }, props.title),
                    props.suffix && (React.createElement("span", { className: `${textColor} text-sm font-medium opacity-80 hidden md:block` }, props.suffix))))));
    };
    if (props.tooltip) {
        return React.createElement(Tooltip, { text: props.tooltip }, getElement());
    }
    return getElement();
};
export default HeaderAlert;
//# sourceMappingURL=HeaderAlert.js.map