import a, { useState as o } from "react";
import "./Image.es2.js";
import { Card as n } from "../../node_modules/@frontify/fondue/dist/components/Card/Card.es.es.js";
import { Checkbox as d, CheckboxState as i } from "../../node_modules/@frontify/fondue/dist/components/Checkbox/Checkbox.es.es.js";
import { Text as r } from "../../node_modules/@frontify/fondue/dist/typography/Text/Text.es.es.js";
var _ = /* @__PURE__ */ ((e) => (e.small = "small", e.medium = "medium", e))(_ || {});
const v = ({ file: e, url: l, onImageClick: s, size: t }) => {
  const [m, c] = o(!1);
  return /* @__PURE__ */ a.createElement(n, {
    hoverable: !0
  }, /* @__PURE__ */ a.createElement("div", {
    className: `image__container ${t && `image__container--${t}`}`,
    onClick: () => {
      c(!m), s({
        url: l,
        file: e
      });
    }
  }, /* @__PURE__ */ a.createElement("div", {
    className: `image__checkbox ${m ? "image__checkbox--visible" : "image__checkbox--hidden"}`
  }, /* @__PURE__ */ a.createElement(d, {
    onChange: () => {
      c(m);
    },
    state: m ? i.Checked : i.Unchecked,
    ariaLabel: e
  })), /* @__PURE__ */ a.createElement("img", {
    src: l,
    alt: e,
    loading: "lazy",
    className: `image ${t && `image--${t}`}`,
    "aria-label": e
  }), /* @__PURE__ */ a.createElement("div", {
    className: `image__description ${t && `image__description--${t}`}`
  }, /* @__PURE__ */ a.createElement(r, {
    as: "p",
    display: "inline",
    overflow: "visible",
    size: "small"
  }, e.replace(/\.[^.]*$/, "")), /* @__PURE__ */ a.createElement(r, {
    as: "p",
    color: "disabled",
    display: "inline",
    overflow: "visible",
    size: "small"
  }, "." + (e.split(".").length > 1 ? e.split(".")[1] : "")))));
};
export {
  v as Image,
  _ as ImageSize
};
//# sourceMappingURL=Image.es.js.map
