import { jsx as t, jsxs as i, Fragment as g } from "react/jsx-runtime";
import { _ as s } from "./twind.D7be0E5m.js";
import { forwardRef as v, useState as x } from "react";
import { F as y, a as b } from "./index.kCXDdPEt.js";
import { b as N } from "./use-section-style.D7ZN4IXn.js";
import { u as w } from "./use-color-preset.B03-6uH7.js";
const M = v(({ brick: a, editable: u }, n) => {
  const { props: d } = a, c = N(a), l = w(a), r = (d.images || []).filter(
    (e) => typeof e.src.src == "string" && e.src.src !== ""
  ), [o, m] = x(0), f = () => {
    m((e) => Math.max(0, e - 1));
  }, h = () => {
    m((e) => Math.min(r.length - 1, e + 1));
  };
  return r.length === 0 ? /* @__PURE__ */ t(
    "div",
    {
      ref: n,
      className: s(
        "flex flex-col grow items-center justify-center min-w-fit text-center",
        l.main,
        Object.values(c)
      ),
      children: /* @__PURE__ */ t("div", { className: "p-8", children: u ? "Add images to this carousel in the panel" : "No images to display" })
    }
  ) : /* @__PURE__ */ t(
    "div",
    {
      ref: n,
      className: s("flex flex-col grow shrink-0 min-w-fit", Object.values(c), l.main),
      children: /* @__PURE__ */ i("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: r.map((e, p) => /* @__PURE__ */ i("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))
          }
        ),
        r.length > 1 && /* @__PURE__ */ i(g, { children: [
          o > 0 && /* @__PURE__ */ t(
            "button",
            {
              type: "button",
              onClick: f,
              className: s(
                "absolute left-2 top-1/2 -translate-y-1/2",
                // "bg-primary-light hover:bg-primary text-primary-content-light",
                l.arrows,
                "rounded-full p-2 transition-all duration-200",
                "opacity-0 group-hover:opacity-100"
              ),
              "aria-label": "Previous image",
              children: /* @__PURE__ */ t(y, { className: "w-5 h-5" })
            }
          ),
          o < r.length - 1 && /* @__PURE__ */ t(
            "button",
            {
              type: "button",
              onClick: h,
              className: s(
                "absolute right-2 top-1/2 -translate-y-1/2",
                // "bg-primary-light hover:bg-primary text-primary-content-light",
                l.arrows,
                "rounded-full p-2 transition-all duration-200",
                "opacity-0 group-hover:opacity-100"
              ),
              "aria-label": "Next image",
              children: /* @__PURE__ */ t(b, { className: "w-5 h-5" })
            }
          )
        ] })
      ] })
    }
  );
});
export {
  M as default
};
//# sourceMappingURL=carousel.DW9YoEQY.js.map
