"use strict";
'use client';
Object.defineProperty(exports, "__esModule", { value: true });
exports.PHXBanner = void 0;
const tslib_1 = require("tslib");
const react_1 = tslib_1.__importDefault(require("react"));
const types_1 = require("../types");
const Button_1 = require("../Button");
const PHXBanner = ({ type = 'informational', className, title, description, hideCloseButton = false, onClose, show, action, primaryAction, secondaryAction, dangerAction, children, }) => {
    const classNameType = (0, types_1.classNames)(type === 'informational' && 'bg-[#91d0ff]', type === 'success' && 'bg-[#29845a] text-white', type === 'warning' && 'bg-[#ffb800]', type === 'danger' && 'bg-[#e51c00] text-white');
    const Icon = () => (react_1.default.createElement(react_1.default.Fragment, null,
        type === 'informational' && (react_1.default.createElement("svg", { className: 'mr-2 h-4 w-4', fill: 'none', stroke: 'currentColor', strokeWidth: '2', viewBox: '0 0 22 22', xmlns: 'http://www.w3.org/2000/svg' },
            react_1.default.createElement("path", { d: 'M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z', strokeLinecap: 'round', strokeLinejoin: 'round' }))),
        type === 'success' && (react_1.default.createElement("svg", { className: 'mr-2 h-3 w-3', fill: 'none', stroke: 'currentColor', strokeWidth: '3', viewBox: '0 0 22 22', xmlns: 'http://www.w3.org/2000/svg' },
            react_1.default.createElement("path", { d: 'M4.5 12.75l6 6 9-13.5', strokeLinecap: 'round', strokeLinejoin: 'round' }))),
        type === 'warning' && (react_1.default.createElement("svg", { className: 'mr-2 h-4 w-4', fill: 'none', stroke: 'currentColor', strokeWidth: '2', viewBox: '0 0 22 22', xmlns: 'http://www.w3.org/2000/svg' },
            react_1.default.createElement("path", { d: 'M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z', strokeLinecap: 'round', strokeLinejoin: 'round' }))),
        type === 'danger' && (react_1.default.createElement("svg", { className: 'mr-2 h-4 w-4', fill: 'none', stroke: 'currentColor', strokeWidth: '2', viewBox: '0 0 22 22', xmlns: 'http://www.w3.org/2000/svg' },
            react_1.default.createElement("path", { d: 'M12 9v3.75m0-10.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.75c0 5.592 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.57-.598-3.75h-.152c-3.196 0-6.1-1.249-8.25-3.286zm0 13.036h.008v.008H12v-.008z', strokeLinecap: 'round', strokeLinejoin: 'round' })))));
    return show ? (react_1.default.createElement("div", { className: `flex w-full flex-col rounded-lg border bg-white text-xs shadow-[0rem_0.1rem_0rem_#00000012] ${className}` },
        react_1.default.createElement("div", { className: `flex items-center justify-between rounded-tl-lg rounded-tr-lg bg-[#29845a] px-3 py-2 font-medium leading-3 ${classNameType}` },
            react_1.default.createElement("div", { className: 'flex items-center' },
                react_1.default.createElement(Icon, null),
                react_1.default.createElement("span", null, title)),
            react_1.default.createElement("div", null,
                react_1.default.createElement("button", { className: `rounded-md p-1 hover:bg-[#1a1a1a0d] hover:text-gray-600 ${hideCloseButton ? 'invisible' : ''}`, type: 'button', onClick: onClose },
                    react_1.default.createElement("span", { className: 'sr-only' }, "Close"),
                    react_1.default.createElement("svg", { className: 'h-4 w-4', fill: 'none', stroke: 'currentColor', strokeWidth: '2', viewBox: '0 0 24 24', xmlns: 'http://www.w3.org/2000/svg' },
                        react_1.default.createElement("path", { d: 'M6 18L18 6M6 6l12 12', strokeLinecap: 'round', strokeLinejoin: 'round' }))))),
        react_1.default.createElement("div", { className: 'px-4' },
            description && react_1.default.createElement("div", { className: 'pb-3 pt-3.5 text-gray-600' }, description),
            children && react_1.default.createElement("div", { className: 'pb-3' }, children),
            action || primaryAction || secondaryAction || dangerAction ? (react_1.default.createElement("div", { className: 'pb-4 flex gap-x-2' },
                action && (react_1.default.createElement(Button_1.PHXButton, { size: 'small', secondary: true, disabled: action === null || action === void 0 ? void 0 : action.disabled, loading: action === null || action === void 0 ? void 0 : action.loading, onClick: action.onClick }, action.content)),
                primaryAction && (react_1.default.createElement(Button_1.PHXButton, { size: 'small', primary: true, disabled: primaryAction === null || primaryAction === void 0 ? void 0 : primaryAction.disabled, loading: primaryAction === null || primaryAction === void 0 ? void 0 : primaryAction.loading, onClick: primaryAction.onClick }, primaryAction.content)),
                secondaryAction && (react_1.default.createElement(Button_1.PHXButton, { size: 'small', disabled: secondaryAction === null || secondaryAction === void 0 ? void 0 : secondaryAction.disabled, loading: secondaryAction === null || secondaryAction === void 0 ? void 0 : secondaryAction.loading, secondary: true, onClick: secondaryAction.onClick }, secondaryAction.content)),
                dangerAction && (react_1.default.createElement(Button_1.PHXButton, { size: 'small', danger2: true, disabled: dangerAction === null || dangerAction === void 0 ? void 0 : dangerAction.disabled, loading: dangerAction === null || dangerAction === void 0 ? void 0 : dangerAction.loading, onClick: dangerAction.onClick }, dangerAction.content)))) : (react_1.default.createElement(react_1.default.Fragment, null))))) : (react_1.default.createElement(react_1.default.Fragment, null));
};
exports.PHXBanner = PHXBanner;
//# sourceMappingURL=Banner.js.map