import React from 'react';
import { Button } from '@theorchard/suite-components';
import { ActionStatusIcon } from 'src/components/shared/action-status-icon';
import { ABACUS_ACTION_STATUSES } from '@theorchard/accounting-apps-shared';
import './styles.scss';

export interface ExchangeRatesProps {
    exchangeRatesUploaded: boolean;
}

export const ExchangeRates: React.FC<ExchangeRatesProps> = ({
    exchangeRatesUploaded,
}) => (
    <div className="ExchangeRates">
        <Button
            data-testid="exchangeRatesBtn"
            disabled={true}
            id="ExchangeRates"
            onClick={() => false}
            variant="quartenary"
        >
            {exchangeRatesUploaded ? (
                <span className="ExchangeRatesText">
                    <ActionStatusIcon
                        actionStatus={ABACUS_ACTION_STATUSES.COMPLETE}
                    />{' '}
                    Exchange Rates
                </span>
            ) : (
                'ADD EXCHANGE RATES IN ADMIN'
            )}
        </Button>
    </div>
);