import React from 'react';
import InlineSVG, { Props as InlineSVGProps } from 'react-inlinesvg'; // eslint-disable-line no-restricted-imports

interface ISvgIcon extends InlineSVGProps {
  /** Class name for the <svg> */
  className?: string;
  /** Tooltip text for the icon. */
  alt?: string;
  /** URL to the svg file. */
  src: string;
  /** Width and height of the icon in pixels. */
  size?: number;
}

/** Renders an inline SVG with an empty frame loading state */
const SvgIcon: React.FC<ISvgIcon> = ({
  src,
  alt,
  size = 24,
  className,
  ...filteredProps
}): React.JSX.Element => {
  const loader = (
    <svg
      className={className}
      width={size}
      height={size}
      data-src={src}
      data-testid='svg-icon-loader'
    />
  );

  return (
    <InlineSVG
      className={className}
      src={src}
      title={alt}
      width={size}
      height={size}
      loader={loader}
      data-testid='svg-icon'
      {...filteredProps}
    >
      {/* If the fetch fails, fall back to displaying the loader */}
      {loader}
    </InlineSVG>
  );
};

export { SvgIcon as default };
