import React from 'react';
import cn from 'classnames';
import SVG, { IconNames } from 'UI/SVG';
import styles from './icon.module.css';

interface IProps { 
  name: IconNames
  size?: number | string
  height?: number
  width?: number
  color?: string
  strokeColor?: string
  className?: string
  style?: object
  marginRight?: number
  inline?: boolean
  onClick?: () => void
}

const Icon: React.FunctionComponent<IProps> = ({
  name,
  size = 12,
  height = size,
  width = size,
  color = 'gray-medium',
  strokeColor,
  className = '',
  style={},
  marginRight = 0,
  inline = false,
  ...props
}) => {
  const _style = {
    width: `${ width }px`,
    height: `${ height }px`,
    ...style,
  };
  if (marginRight){
    // @ts-ignore
    _style.marginRight = `${ marginRight }px`;
  }

  const additionalStyles = {
    ...(color === 'inherit' ? { fill: 'currentColor' } : {}),
    ...(strokeColor ? { stroke: strokeColor } : {}), 
  };

  return (
    <span
      { ...props }
      style={{..._style, ...additionalStyles }}
      className={ cn(className, styles.wrapper, `fill-${ color }`) }
      data-inline={ inline }
    >
      <SVG name={ name } height={ height } width={ width }  style={strokeColor ? { stroke: strokeColor } : undefined}  />
    </span>
  );
}

Icon.displayName = 'Icon';
export default Icon;