import { jsx as t, jsxs as n, Fragment as g } from "react/jsx-runtime";
import { aI as m } from "./use-page-data.BYLN5MSa.js";
import { a as s } from "./twind.Cg2g8xBZ.js";
import { useState as x } from "react";
import { F as v, a as y } from "./index.svJU_5da.js";
import { b as N } from "./use-section-style.CqWLdjop.js";
import { B as u } from "./BrickRoot.CQgjTuOI.js";
function I({ brick: l, editable: r }) {
  const { props: f } = l, i = N(l), a = (f.images || []).filter(
    (e) => typeof e.src.src == "string" && e.src.src !== ""
  ), [o, c] = x(0), d = () => {
    c((e) => Math.max(0, e - 1));
  }, h = () => {
    c((e) => Math.min(a.length - 1, e + 1));
  };
  return a.length === 0 ? /* @__PURE__ */ t(
    u,
    {
      brick: l,
      editable: r,
      manifest: m,
      className: s("flex flex-col items-center justify-center text-center", Object.values(i)),
      children: /* @__PURE__ */ t("div", { className: "p-8", children: r ? "Add images to this carousel in the panel" : "No images to display" })
    }
  ) : /* @__PURE__ */ t(
    u,
    {
      brick: l,
      editable: r,
      manifest: m,
      className: s("flex flex-col", Object.values(i)),
      children: /* @__PURE__ */ n("div", { className: s("relative overflow-hidden group flex-1"), children: [
        /* @__PURE__ */ t(
          "div",
          {
            className: "flex transition-transform duration-300 ease-in-out absolute inset-0",
            style: { transform: `translateX(-${o * 100}%)` },
            children: a.map((e, p) => /* @__PURE__ */ n("div", { className: "w-full flex-shrink-0 relative flex items-center justify-center", children: [
              /* @__PURE__ */ t(
                "img",
                {
                  src: e.src.src,
                  alt: e.src.alt,
                  className: s("w-full h-full object-cover"),
                  style: { display: "block" }
                }
              ),
              e.legend && /* @__PURE__ */ t("div", { className: "absolute bottom-0 left-0 right-0 bg-black/60 text-white text-sm p-3", children: e.legend })
            ] }, p))
          }
        ),
        a.length > 1 && /* @__PURE__ */ n(g, { children: [
          o > 0 && /* @__PURE__ */ t(
            "button",
            {
              type: "button",
              onClick: d,
              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(v, { className: "w-5 h-5" })
            }
          ),
          o < a.length - 1 && /* @__PURE__ */ t(
            "button",
            {
              type: "button",
              onClick: h,
              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(y, { className: "w-5 h-5" })
            }
          )
        ] })
      ] })
    }
  );
}
export {
  I as default
};
