import React, { FC } from 'react';

export interface ImageProps {
  src: string;
  alt?: string;
  width?: string;
  height?: string;
  className?: string;
  style?: React.CSSProperties;
  svg?: {
    absolutePath?: string;
    content?: string;
    dataURI?: string;
    originalContent?: string;
    relativePath?: string;
  };
  file?: {
    contentType?: string;
    url?: string;
    fileName?: string;
    details?: {
      image?: {
        width?: string;
        height?: string;
      };
    };
  };
  fluid?: unknown;
  fixed?: unknown;
}

const Image: FC<ImageProps> = ({
  className,
  alt,
  src,
  width,
  height,
  style,
  svg,
  file,
}) => {
  const isSvgImage = svg && file && file.contentType === 'image/svg+xml';
  return (
    <div>
      {!isSvgImage && (
        <img
          width={width}
          height={height}
          className={className}
          src={src}
          alt={alt}
          style={style}
          data-testid="Image"
        />
      )}
      {isSvgImage && svg && file && (
        <div
          dangerouslySetInnerHTML={{ __html: svg.content }}
          className={className}
          style={style}
          data-testid="Image"
        />
      )}
    </div>
  );
};

export default Image;