import React from 'react';
import { ABACUS_ACTION_STATUSES } from '@theorchard/accounting-apps-shared';
import { GlyphIcon } from '@theorchard/suite-icons';
import PropTypes from 'prop-types';

export interface ActionStatusIconProps {
    actionStatus: string;
}

export const ActionStatusIcon = ({ actionStatus }: ActionStatusIconProps) => (
    <span
        className={`ActionStatusIcon ${actionStatus}`}
        data-testid={`ActionStatusIcon-${actionStatus}`}
    >
        {actionStatus === ABACUS_ACTION_STATUSES.RUNNING && (
            <GlyphIcon name="refresh" size={16} />
        )}
        {actionStatus === ABACUS_ACTION_STATUSES.COMPLETE && (
            <GlyphIcon name="check" size={12} />
        )}
        {actionStatus === ABACUS_ACTION_STATUSES.ERROR && (
            <GlyphIcon name="warning" size={12} />
        )}
    </span>
);

ActionStatusIcon.propTypes = {
    actionStatus: PropTypes.string.isRequired,
};