"use strict";
var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.AttentionBox = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const styled_components_1 = __importDefault(require("styled-components"));
const utils_1 = require("../../theme/utils");
const icons_1 = require("../../theme/icons");
const Icon_1 = require("../Icon");
const Text_1 = require("../Text/Text");
const IconContainer = styled_components_1.default.span(() => ({
    display: 'flex',
    alignItems: 'center',
    marginBottom: '10px',
    svg: { padding: '0 !important' },
}));
const Component = styled_components_1.default.div(({ variant, margin, theme }) => (Object.assign(Object.assign({}, (theme.ATTENTIONBOX[variant] || {})), { margin: utils_1.getMargin({ theme, margin }) })));
const Title = styled_components_1.default(Text_1.Text) `
  font-size: 14px !important;
  font-weight: 500 !important;
`;
const AttentionPhrase = ({ title, important, color, }) => {
    const getColor = () => {
        const fallBackColor = 'gray1';
        if (important && color) {
            return color;
        }
        else if (important) {
            return 'brandMain';
        }
        else {
            return fallBackColor;
        }
    };
    return (jsx_runtime_1.jsxs(IconContainer, { children: [jsx_runtime_1.jsx(Icon_1.Icon, { icon: icons_1.polyIcons.InformationOutline, variant: "circle", size: "20px", margin: "0 10px 0 0", color: color || 'brandMain', bg: "light" }, void 0), jsx_runtime_1.jsx(Title, Object.assign({ variant: "span", color: getColor() }, { children: important ? title.toUpperCase() : title }), void 0)] }, void 0));
};
const AttentionBox = (_a) => {
    var { title, important, color, children } = _a, props = __rest(_a, ["title", "important", "color", "children"]);
    return (jsx_runtime_1.jsxs(Component, Object.assign({}, props, { children: [jsx_runtime_1.jsx(AttentionPhrase, { title: title, important: important, color: color }, void 0), children] }), void 0));
};
exports.AttentionBox = AttentionBox;
//# sourceMappingURL=AttentionBox.js.map