import { jsx as o } from "@emotion/react/jsx-runtime";
import { useMemo as E } from "react";
import T from "clsx";
import { IconButton as _, Tooltip as I } from "@mui/material";
import { Image as O } from "../../../Image/Image.js";
import { WrapperImageButton as g } from "./styles.js";
import { useUtilityClasses as B } from "./utils/Clases/index.js";
import { TEST_PROP_ID as p } from "../../../../test/constants_no_mock.js";
import { getNameDataTestId as s } from "../../../../test/getNameDataTestId.js";
import { IMAGE_BUTTON_KEY_COMPONENT as c } from "./tests/constants.js";
function b({
  src: t,
  width: r,
  tooltip: f,
  sx: m = { width: r },
  className: l,
  dataTestId: e,
  alt: u,
  ...a
}) {
  const i = f, N = B(), n = E(() => /* @__PURE__ */ o(
    _,
    {
      sx: m,
      ...a,
      ...process.env.NODE_ENV !== "production" ? { [p]: s(c, "button", e) } : {},
      children: /* @__PURE__ */ o(O, { src: t, alt: u })
    }
  ), [t, r, m]);
  return /* @__PURE__ */ o(
    g,
    {
      className: T(N.root, l),
      ...process.env.NODE_ENV !== "production" ? { [p]: s(c, "root", e) } : {},
      children: i ? /* @__PURE__ */ o(I, { title: i || "", children: n }) : n
    }
  );
}
export {
  b as ImageButton
};
