import { Icon, Theme } from "@mui/material";
import { makeStyles } from "@mui/styles";

const useStyles = makeStyles((_theme: Theme) => ({
  icon: {
    display: "flex",           // Ensure flexbox for centering
    justifyContent: "center",  // Center horizontally
    alignItems: "center",      // Center vertically
    margin: "1px",
    overflow: "hidden",        // Prevent image overflow
  },
  img: {
    maxHeight: "100%",         // Fit within container height
    maxWidth: "100%",          // Fit within container width
    width: "auto",             // Maintain aspect ratio
    height: "auto",            // Maintain aspect ratio
  },
}));

interface Props {
  src?: string;
  alt?: string;
  style?: any;
  iconHeight?: number | string;
  iconWidth?: number | string;
}

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

  if (!src) return null;

  return (
    <Icon
      className={classes.icon}
      style={{ height: iconHeight, width: iconWidth }}
    >
      <img
        alt={alt}
        className={classes.img}
        src={src}
        color="transparent"
        style={style}
        loading="lazy"
      />
    </Icon>
  );
}