import { jsxs as a, Fragment as d, jsx as e } from "react/jsx-runtime";
import { useState as n } from "react";
import m from "react-placeholder";
import { Dialog as f, DialogContent as u, IconButton as g } from "@mui/material";
import { CloseOutlined as y } from "@mui/icons-material";
import s from "./icons/empty-spaces-nft.svg.js";
function k({ src: t, alt: p }) {
  const [o, c] = n(!1), [h, i] = n(!1), r = () => i(!0), l = () => i(!1);
  return /* @__PURE__ */ a(d, { children: [
    /* @__PURE__ */ e(
      m,
      {
        ready: o,
        customPlaceholder: (
          // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
          /* @__PURE__ */ e(
            "img",
            {
              style: { cursor: "pointer" },
              alt: p,
              src: t,
              width: "58px",
              height: "58px",
              onError: () => c(!0),
              onClick: r
            }
          )
        ),
        children: /* @__PURE__ */ e(s, { style: { cursor: "pointer", width: "58px", height: "58px" }, onClick: r })
      }
    ),
    /* @__PURE__ */ e(
      f,
      {
        open: h,
        onClose: l,
        "aria-labelledby": "preview-space-nft-display",
        "aria-describedby": "preview space nft display",
        fullWidth: !0,
        maxWidth: "md",
        children: /* @__PURE__ */ a(u, { style: { padding: "8px 8px", backgroundColor: "rgba(0,0,0,0.8)" }, children: [
          /* @__PURE__ */ e(
            g,
            {
              color: "inherit",
              onClick: l,
              "aria-label": "close",
              style: { position: "absolute", top: 8, right: 8, color: "white" },
              children: /* @__PURE__ */ e(y, {})
            }
          ),
          o ? /* @__PURE__ */ e(
            s,
            {
              style: {
                width: "100%",
                height: "75vh"
              }
            }
          ) : /* @__PURE__ */ e(
            "img",
            {
              src: t,
              alt: "",
              style: {
                width: "100%",
                height: "75vh",
                objectFit: "contain"
              }
            }
          )
        ] })
      }
    )
  ] });
}
export {
  k as default
};
