import useTranslateValue from "../../Utils/Translation";
import React from "react";
export var AlertBannerType;
(function (AlertBannerType) {
    AlertBannerType["Success"] = "success";
    AlertBannerType["Warning"] = "warning";
    AlertBannerType["Danger"] = "danger";
    AlertBannerType["Info"] = "info";
})(AlertBannerType || (AlertBannerType = {}));
const bannerStyles = {
    [AlertBannerType.Success]: {
        container: "bg-emerald-50 border-emerald-200",
        dot: "bg-emerald-500",
        title: "text-emerald-800",
    },
    [AlertBannerType.Warning]: {
        container: "bg-amber-50 border-amber-200",
        dot: "bg-amber-500",
        title: "text-amber-800",
    },
    [AlertBannerType.Danger]: {
        container: "bg-red-50 border-red-200",
        dot: "bg-red-500",
        title: "text-red-800",
    },
    [AlertBannerType.Info]: {
        container: "bg-blue-50 border-blue-200",
        dot: "bg-blue-500",
        title: "text-blue-800",
    },
};
const AlertBanner = (props) => {
    var _a;
    const { translateString } = useTranslateValue();
    const translatedTitle = (_a = translateString(props.title)) !== null && _a !== void 0 ? _a : props.title;
    const styles = bannerStyles[props.type];
    return (React.createElement("div", { className: `rounded-lg border p-4 ${styles.container} ${props.className || ""}`, role: "alert" },
        React.createElement("div", { className: "flex items-center justify-between" },
            React.createElement("div", { className: "flex items-center gap-3" },
                React.createElement("span", { className: `inline-flex h-3 w-3 rounded-full ${styles.dot}` }),
                React.createElement("span", { className: `text-lg font-semibold ${styles.title}` }, translatedTitle)),
            props.rightElement && React.createElement("div", null, props.rightElement)),
        props.children && React.createElement("div", { className: "mt-2" }, props.children)));
};
export default AlertBanner;
//# sourceMappingURL=AlertBanner.js.map