import clsx from 'clsx';
import React from 'react';
import { ActionData } from '../../Actions';
import { InlineMenu } from '../../InlineMenu/InlineMenu';
import { ImageLoader, ImageLoaderProps } from '../../Loaders';
import classes from './InfoImage.scss';

export interface InfoImageProps extends ImageLoaderProps {
  /** Optional class */
  className?: string;
  /** Optional styles */
  style?: React.CSSProperties;
  /** Actions that should be available on the image's `InlineMenu` */
  inlineMenuActions?: ActionData[];
}

export const InfoImage: React.FC<InfoImageProps> = ({
  className,
  imgSrc,
  style,
  fallbackSrc,
  inlineMenuActions,
  ...rest
}) => {
  return (
    <div
      className={clsx(
        classes.container,
        'info-panel-image-container',
        className,
      )}
      style={style}
      data-test-id="info-image"
    >
      <ImageLoader
        imageClassName={classes.image}
        imgSrc={imgSrc}
        height={420}
        width={419} /*1px border*/
        fallbackSrc={fallbackSrc}
        {...rest}
      >
        {inlineMenuActions && (
          <InlineMenu
            buttonClassName={classes.inlineMenu}
            actions={inlineMenuActions}
            showArrow={false}
            placement="bottom-end"
            addBackgroundOpacity={true}
          />
        )}
      </ImageLoader>
    </div>
  );
};
