import React, { ImgHTMLAttributes } from 'react';
import classNames from 'classnames';

export type ThemeProps =
  | 'primary'
  | 'secondary'
  | 'success'
  | 'info'
  | 'warning'
  | 'danger'
  | 'light'
  | 'dark'
  | 'white'
  | 'black';

export interface ImageIconProps extends ImgHTMLAttributes<HTMLImageElement> {
  type?: string;
  customUrl?: string;
  theme?: ThemeProps;
}

const ImageIcon: React.FC<ImageIconProps> = (props) => {
  const { className, theme, src, type, customUrl, ...restProps } = props;
  const classes = classNames('paypay-image-icon', className, {
    [`image-icon-${theme}`]: theme,
  });
  let url;
  if (customUrl && customUrl.length > 0) {
    url = customUrl;
  } else {
    url = src ? require(`../../assets/${src}.${type}`)?.default : null;
  }
  return url ? (
    <img alt="" className={classes} src={url} {...restProps} />
  ) : null;
};

ImageIcon.defaultProps = {
  type: 'png',
};

export default ImageIcon;