import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { forwardRef } from 'react';
import Typography from '../Typography';
import './StatusIndicator.scss';
import Icon from '../Icon';
const StatusIndicator = forwardRef(({ label = 'Status', iconName = 'update_icon', onClick, isDisable = false, variant = 'default', backgroundColor = false, border = false, }, ref) => {
    const resolvedIconName = variant === 'danger' ? 'close' : iconName;
    const variantColorMap = {
        default: 'var(--ff-avatar-background-color)',
        success: 'var(--status-success-text-color)',
        danger: 'var(--ff-delete-button-attachment)',
    };
    const iconColor = variantColorMap[variant] || variantColorMap.default;
    return (_jsx("button", { disabled: isDisable, onClick: onClick, className: `
         ff-status-indicator
          ff-status-indicator--${variant}
          ${backgroundColor
            ? `ff-status-indicator--with-bg ff-status-indicator--${variant}-bg`
            : ''}
          ${border
            ? `ff-status-indicator--with-border ff-status-indicator--${variant}-border`
            : ''}
        `, ref: ref, children: _jsxs("div", { className: "ff-status-indicator__content", children: [_jsx(Icon, { name: resolvedIconName, color: iconColor, className: `ff-status-indicator__icon ff-status-indicator__icon--${variant}` }), _jsx(Typography, { as: "div", fontSize: 12, className: `ff-status-indicator__label ff-status-indicator__label--${variant}`, fontWeight: "medium", lineHeight: "20px", children: label })] }) }));
});
export default StatusIndicator;
//# sourceMappingURL=StatusIndicator.js.map