import React from 'react';
import cx from 'classnames';
import { ArrowRightGlyph, CloseGlyph } from '@orchard/frontend-react-components';
// eslint-disable-next-line import/no-webpack-loader-syntax
import FeeGlyph from '!svg-react-loader!./../../assets/fee-glyph.svg';

const CLASS_NAME = 'BreakdownIcon';

type Props = { variant: 'source' | 'fee' | 'target' | 'conversion' };

const BreakdownIcon: React.FC<Props> = ({ variant }) => {
    let Glyph;
    if (variant === 'fee')
        Glyph = FeeGlyph;
    else if (variant === 'conversion')
        Glyph = CloseGlyph;
    else
        Glyph = ArrowRightGlyph;

    return (
        <div
            className={ cx(
                CLASS_NAME,
                variant !== 'fee' && `${CLASS_NAME}--${variant}`
            ) }
        >
            <Glyph />
        </div>
    );
};

export default BreakdownIcon;