'use client';
import React from 'react';
import { PHXButton } from '../Button';
import { classNames } from '../types';
import Icon from './Icon';
export const PHXBannerWithCard = ({ action, children, className, dangerAction, description, hideCloseButton = false, onClose, primaryAction, secondaryAction, show, title, type = 'informational', hideIcon = false, }) => {
    const classNameType = classNames(type === 'informational' && 'bg-[#EAF4FF] text-[#00527C]', type === 'success' && 'bg-[#CDFEE1] text-[#0C5132]', type === 'warning' && 'bg-[#FFF1E3] text-[#5E4200]', type === 'danger' && 'bg-[#FEE9E8] text-[#8E1F0B]');
    return show ? (React.createElement("div", { className: classNames('rounded-lg p-2 shadow-[0rem_0.0825rem_0rem_#00000012]', classNameType, className) },
        React.createElement("div", { className: classNames('flex items-center justify-between text-xs font-semibold leading-5') },
            React.createElement("div", { className: 'flex' },
                !hideIcon && (React.createElement("div", { className: 'flex-shrink-0' },
                    React.createElement(Icon, { type: type }))),
                title && React.createElement("span", null, title),
                !title && description && React.createElement("div", { className: 'max-w-full text-xs font-normal' }, description)),
            !hideCloseButton && (React.createElement("button", { className: `rounded-md p-1 hover:bg-[#1a1a1a0d] hover:text-gray-600 ${hideCloseButton ? 'invisible' : ''}`, onClick: onClose, type: 'button' },
                React.createElement("span", { className: 'sr-only' }, "Close"),
                React.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.createElement("path", { d: 'M6 18L18 6M6 6l12 12', strokeLinecap: 'round', strokeLinejoin: 'round' }))))),
        React.createElement("div", { className: classNames('', !hideCloseButton && 'pr-6', !hideIcon && 'pl-[1.65rem]') },
            title && description && React.createElement("div", { className: 'max-w-full pt-1 text-xs font-normal' }, description),
            children && React.createElement("div", { className: 'pt-3' }, children),
            action || primaryAction || secondaryAction || dangerAction ? (React.createElement("div", { className: 'flex gap-x-2 pt-3' },
                action && (React.createElement(PHXButton, { className: 'font-semibold', disabled: action === null || action === void 0 ? void 0 : action.disabled, loading: action === null || action === void 0 ? void 0 : action.loading, onClick: action.onClick, secondary: true, size: 'small' }, action.content)),
                primaryAction && (React.createElement(PHXButton, { className: 'font-semibold', disabled: primaryAction === null || primaryAction === void 0 ? void 0 : primaryAction.disabled, loading: primaryAction === null || primaryAction === void 0 ? void 0 : primaryAction.loading, onClick: primaryAction.onClick, primary: true, size: 'small' }, primaryAction.content)),
                secondaryAction && (React.createElement(PHXButton, { className: 'font-semibold', disabled: secondaryAction === null || secondaryAction === void 0 ? void 0 : secondaryAction.disabled, loading: secondaryAction === null || secondaryAction === void 0 ? void 0 : secondaryAction.loading, onClick: secondaryAction.onClick, secondary: true, size: 'small' }, secondaryAction.content)),
                dangerAction && (React.createElement(PHXButton, { className: 'font-semibold', disabled: dangerAction === null || dangerAction === void 0 ? void 0 : dangerAction.disabled, loading: dangerAction === null || dangerAction === void 0 ? void 0 : dangerAction.loading, danger2: true, onClick: dangerAction.onClick, size: 'small' }, dangerAction.content)))) : (React.createElement(React.Fragment, null))))) : (React.createElement(React.Fragment, null));
};
//# sourceMappingURL=BannerWithCard.js.map