import React from 'react';
import icons from '@assets/images/icons-sprite.svg';
import estimationIconUrl from '@assets/images/estimated_revenue.png';
import { Tooltip } from '@spglobal/ca-mfe-package-utils';

interface SVGProps {
  name: string;
  width?: number;
  height?: number;
}

export const SVG: React.FC<SVGProps> = props => {
  const { name, width = 20, height = 20 } = props;

  return (
    <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height}>
      <use xlinkHref={`${icons}#${name}`} />
    </svg>
  );
};

export const ScoringIcons = {
  ESTIMATION_ICON: 'ESTIMATION_ICON'
};

export const ScoringIcon = ({
  icon = ScoringIcons.ESTIMATION_ICON,
  height=15,
  width=15,
  style=null,
  tooltipText
}) => {

  let iconSrc;
  switch(icon){
    case ScoringIcons.ESTIMATION_ICON: {
      iconSrc = estimationIconUrl;
      break;
    }
    default: {
      iconSrc = estimationIconUrl;
      break;
    }
  }

  return (
    <Tooltip
      triggerElement={
        <span>
          <img src={iconSrc} height={height} width={width} style={style ? style: {
            marginBottom: -3,
            marginLeft: 6
          }} alt=''/>
        </span>
      }
    >
      { tooltipText }
    </Tooltip>
  );
};