import * as React from 'react';
import { styled } from '@mui/material/styles';
import Box from '@mui/material/Box';
import { ThemeOptionsContext } from "../ThemeContext/index.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const Img = styled('img')({
  display: 'inline-block',
  verticalAlign: 'bottom'
});
let neverHydrated = true;
export default function IconImage(props) {
  const {
    height: heightProp,
    name,
    width: widthProp,
    mode: modeProp,
    ...other
  } = props;
  const themeOptions = React.useContext(ThemeOptionsContext);
  const [firstRender, setFirstRender] = React.useState(true);
  React.useEffect(() => {
    setFirstRender(false);
    neverHydrated = false;
  }, []);
  let defaultWidth;
  let defaultHeight;
  const mode = modeProp ?? themeOptions.paletteMode;
  if (name.startsWith('product-')) {
    defaultWidth = 36;
    defaultHeight = 36;
  } else if (name.startsWith('pricing/x-plan-')) {
    defaultWidth = 17;
    defaultHeight = 20;
  } else if (['pricing/yes', 'pricing/no', 'pricing/time'].includes(name)) {
    defaultWidth = 18;
    defaultHeight = 18;
  }
  const width = widthProp ?? defaultWidth;
  const height = heightProp ?? defaultHeight;

  // First time render with a theme depend image
  if (firstRender && neverHydrated && mode !== '') {
    if (other.loading === 'eager') {
      return /*#__PURE__*/_jsxs(React.Fragment, {
        children: [/*#__PURE__*/_jsx(Img, {
          className: "only-light-mode-v2",
          src: `/static/branding/${name}-light.svg`,
          alt: "",
          width: width,
          height: height,
          ...other,
          loading: "lazy"
        }), /*#__PURE__*/_jsx(Img, {
          className: "only-dark-mode-v2",
          src: `/static/branding/${name}-dark.svg`,
          alt: "",
          width: width,
          height: height,
          ...other,
          loading: "lazy"
        })]
      });
    }

    // Prevent hydration mismatch between the light and dark mode image source.
    return /*#__PURE__*/_jsx(Box, {
      component: "span",
      sx: {
        width,
        height,
        display: 'inline-block'
      }
    });
  }
  return /*#__PURE__*/_jsx(Img, {
    src: `/static/branding/${name}${mode ? `-${mode}` : ''}.svg`,
    alt: "",
    loading: "lazy",
    width: width,
    height: height,
    ...other
  });
}