import * as React from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { config } from 'config/general';

export interface StateProps {}

export interface DispatchProps {}

export interface OwnProps {
  icon: string | React.Component;
  className: string;
  iconStyle: {};
  fontAwesome?: boolean;
}

export type CustomIconProps = StateProps & DispatchProps & OwnProps;

interface CustomIconState {}

const CustomIcon = (props: CustomIconProps) => {
  const { icon, className, img, fontAwesome, iconStyle, ...rest } = props;

  const defaultIcon = config.defaultIcon;

  const forceFontAwesome = fontAwesome || defaultIcon === 'fontawesome';

  if (img) {
    return <img src={img} className={className} alt="icon" />;
  }

  if (typeof icon === 'string' || forceFontAwesome) {
    return <FontAwesomeIcon icon={icon} className={className} style={iconStyle || {}} {...rest} />;
  }

  return icon;
};

export default CustomIcon;
