import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import Background from '../Background';

import './icon.scss'; // eslint-disable-line no-unused-vars

const propTypes = {
  /** @ignore */
  className: PropTypes.string,
  name: PropTypes.string.isRequired,
  variant: PropTypes.oneOf(['primary', 'circle']),
  size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'auto'])
};

const defaultProps = {
  className: undefined,
  variant: 'primary',
  size: 'sm'
};

const Icon = ({ name, size, className, variant, ...props }) => {
  switch (variant) {
    case 'circle':
      return (
        <div styleName="circle-wrapper" className={className}>
          <Background
            styleName={classNames('circle', `circle-${size}`)}
            {...props}
          >
            <i styleName={classNames('icon', `icon-${name}`, 'icon-auto')} />
          </Background>
        </div>
      );
    case 'primary':
    default:
      return (
        <Background
          className={className}
          styleName={classNames('icon', `icon-${name}`, `icon-${size}`)}
          component="i"
          {...props}
        />
      );
  }
};

Icon.propTypes = propTypes;
Icon.defaultProps = defaultProps;

export default Icon;
