import { Icon } from "@mui/material";
import { makeStyles } from "@mui/styles";
// import Image from "material-ui-image";
import { Img as Image } from 'react-image';

const useStyles = makeStyles(() => ({
  icon: {
    textAlign: "center",
    margin: "1px"
  },
  img: {
    height: "100%",
    width: "auto !important"
  }
}));

interface Props {
  src?: string;
  alt?: string;
  style?: any;
}

export function ImgIcon(props: Props) {
  const { src, alt, style } = props;
  const classes = useStyles();

  if (!src) return null;

  return (
    <Icon className={classes.icon}>
      <Image
        alt={alt}
        className={classes.img}
        src={src}
        color="transparent"
        style={style}
      />
    </Icon>
  );
}
