import React from 'react';
import PropTypes from 'prop-types';

const Icon = React.memo(props => {
    var size = props.size ? ' icon--' + props.size : '';
    var className = props.className ? ' ' + props.className : '';
    var klass = 'icon' + (!props.noFill ? ' icon--' + props.name : '') + size + className;

    var name = '#' + props.name + '-icon';
    var useTag = '<use xlink:href=' + name + ' />';
    var Icon = React.createElement('svg', { className: 'icon__cnt', dangerouslySetInnerHTML: { __html: useTag } });
    return React.createElement(
        'div',
        { className: klass },
        wrapSpinner(Icon, klass)
    );
});

function wrapSpinner(Html, klass) {
    if (klass.indexOf('spinner') > -1) {
        return React.createElement(
            'div',
            { className: 'icon__spinner' },
            Html
        );
    } else {
        return Html;
    }
}

export default Icon;

Icon.propTypes = {
    size: PropTypes.string.isRequired,
    name: PropTypes.string.isRequired,
    className: PropTypes.string,
    noFill: PropTypes.bool
};