import { j as t } from "../../../../../_virtual/jsx-runtime.js";
import { a as c } from "../../../../sdk/dist/shared/chunk-QISTDGPP.js";
import "@sinclair/typebox";
import "../../../../sdk/dist/shared/chunk-UU2MSQXY.js";
import "../../../../sdk/dist/shared/chunk-T3LIA4YB.js";
import "../../../../sdk/dist/shared/chunk-YBGPPF7T.js";
import "../../../../sdk/dist/shared/chunk-UMHXXXVP.js";
import "../../../../sdk/dist/shared/chunk-5N6MBJJ4.js";
import { tx as s } from "../../../../style-system/dist/twind.js";
import { useState as d } from "react";
import { FiChevronLeft as h, FiChevronRight as g } from "../../../../../node_modules/.pnpm/react-icons@5.3.0_react@18.3.0-canary-3d9b20132-20240124/node_modules/react-icons/fi/index.js";
import { useBrickStyle as j } from "../hooks/use-brick-style.js";
import m from "../components/BrickRoot.js";
function P({ brick: o, editable: l }) {
  const { props: u } = o, i = j(o), r = (u.images || []).filter(
    (e) => typeof e.src.src == "string" && e.src.src !== ""
  ), [a, n] = d(0), p = () => {
    n((e) => Math.max(0, e - 1));
  }, f = () => {
    n((e) => Math.min(r.length - 1, e + 1));
  };
  return r.length === 0 ? /* @__PURE__ */ t.jsx(
    m,
    {
      brick: o,
      editable: l,
      manifest: c,
      className: s("flex flex-col items-center justify-center text-center", Object.values(i)),
      children: /* @__PURE__ */ t.jsx("div", { className: "p-8", children: l ? "Add images to this carousel in the panel" : "No images to display" })
    }
  ) : /* @__PURE__ */ t.jsx(
    m,
    {
      brick: o,
      editable: l,
      manifest: c,
      className: s("flex flex-col", Object.values(i)),
      children: /* @__PURE__ */ t.jsxs("div", { className: s("relative overflow-hidden group flex-1"), children: [
        /* @__PURE__ */ t.jsx(
          "div",
          {
            className: "flex transition-transform duration-300 ease-in-out absolute inset-0",
            style: { transform: `translateX(-${a * 100}%)` },
            children: r.map((e, x) => /* @__PURE__ */ t.jsxs("div", { className: "w-full flex-shrink-0 relative flex items-center justify-center", children: [
              /* @__PURE__ */ t.jsx(
                "img",
                {
                  src: e.src.src,
                  alt: e.src.alt,
                  className: s("w-full h-full object-cover"),
                  style: { display: "block" }
                }
              ),
              e.legend && /* @__PURE__ */ t.jsx("div", { className: "absolute bottom-0 left-0 right-0 bg-black/60 text-white text-sm p-3", children: e.legend })
            ] }, x))
          }
        ),
        r.length > 1 && /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
          a > 0 && /* @__PURE__ */ t.jsx(
            "button",
            {
              type: "button",
              onClick: p,
              className: s(
                "absolute left-2 top-1/2 -translate-y-1/2",
                // presetClasses.arrows,
                "rounded-full p-2 transition-all duration-200",
                "opacity-0 group-hover:opacity-100"
              ),
              "aria-label": "Previous image",
              children: /* @__PURE__ */ t.jsx(h, { className: "w-5 h-5" })
            }
          ),
          a < r.length - 1 && /* @__PURE__ */ t.jsx(
            "button",
            {
              type: "button",
              onClick: f,
              className: s(
                "absolute right-2 top-1/2 -translate-y-1/2",
                // presetClasses.arrows,
                "rounded-full p-2 transition-all duration-200",
                "opacity-0 group-hover:opacity-100"
              ),
              "aria-label": "Next image",
              children: /* @__PURE__ */ t.jsx(g, { className: "w-5 h-5" })
            }
          )
        ] })
      ] })
    }
  );
}
export {
  P as default
};
//# sourceMappingURL=carousel.js.map
