import { jsxs as s, jsx as i } from "@emotion/react/jsx-runtime";
import { FILES_ICONS as n, RHF_UPLOAD_SINGLE_FILE_CLASSES as e, CLOSE_PREVIEW_ICON as w } from "../../constants.js";
import { ContainerPreviewStyled as d, ImagePreviewStyled as p, ContainerNameSizeStyled as N, NamePreviewStyled as C, SizePreviewStyled as _, ClosePreviewStyled as I } from "../../slots/RHFUploadSingleFileSlots.js";
import { useEnvironment as f } from "@m4l/core";
import { formatFileSize as y } from "../../helpers/formatFileSize.js";
const L = (l) => {
  const { file: r, onChange: o, onClose: c, disabled: m } = l, { host_static_assets: t, environment_assets: a } = f(), v = `${t}/${a}/${n[r.type] || n["application/octet-stream"]}`, S = `${t}/${a}/${w}`;
  return /* @__PURE__ */ s(d, { className: e.containerPreview, children: [
    /* @__PURE__ */ i(p, { enableIntersectionObserver: !1, role: "img", "aria-label": "image-preview", src: v, className: e.imagePreview }),
    /* @__PURE__ */ s(N, { className: e.containerNameSize, children: [
      /* @__PURE__ */ i(C, { className: e.namePreview, children: r.name }),
      /* @__PURE__ */ i(_, { className: e.sizePreview, color: "text.secondary", children: y(r.size) })
    ] }),
    /* @__PURE__ */ i(
      I,
      {
        role: "button",
        "aria-label": "button-close-preview",
        icon: S,
        className: e.closePreview,
        onClick: (P) => {
          P.stopPropagation(), o && o(null), c();
        },
        disabled: m
      }
    )
  ] });
};
export {
  L as Preview
};
