import { jsx as t, jsxs as n, Fragment as x } from "react/jsx-runtime";
import { M as u } from "./chunk-RXIM6GTA.C-ABNABt.js";
import "@sinclair/typebox";
import { _ as s } from "./twind.D_WBdNpx.js";
import { useState as v } from "react";
import { F as y, a as N } from "./index.C1sR-7YH.js";
import { b } from "./use-section-style.CgktT_qE.js";
import { u as w } from "./use-color-preset.CYlEPd2C.js";
import { B as f } from "./BrickRoot.LoA8SzjD.js";
function R({ brick: o, editable: l }) {
  const { props: p } = o, c = b(o), a = w(o), r = (p.images || []).filter(
    (e) => typeof e.src.src == "string" && e.src.src !== ""
  ), [i, m] = v(0), d = () => {
    m((e) => Math.max(0, e - 1));
  }, h = () => {
    m((e) => Math.min(r.length - 1, e + 1));
  };
  return r.length === 0 ? /* @__PURE__ */ t(
    f,
    {
      editable: l,
      manifest: u,
      className: s(
        "flex flex-col items-center justify-center text-center",
        a.main,
        Object.values(c)
      ),
      children: /* @__PURE__ */ t("div", { className: "p-8", children: l ? "Add images to this carousel in the panel" : "No images to display" })
    }
  ) : /* @__PURE__ */ t(
    f,
    {
      editable: l,
      manifest: u,
      className: s("flex flex-col", Object.values(c), a.main),
      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(-${i * 100}%)` },
            children: r.map((e, g) => /* @__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 })
            ] }, g))
          }
        ),
        r.length > 1 && /* @__PURE__ */ n(x, { children: [
          i > 0 && /* @__PURE__ */ t(
            "button",
            {
              type: "button",
              onClick: d,
              className: s(
                "absolute left-2 top-1/2 -translate-y-1/2",
                // "bg-primary-light hover:bg-primary text-primary-content-light",
                a.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" })
            }
          ),
          i < 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",
                a.arrows,
                "rounded-full p-2 transition-all duration-200",
                "opacity-0 group-hover:opacity-100"
              ),
              "aria-label": "Next image",
              children: /* @__PURE__ */ t(N, { className: "w-5 h-5" })
            }
          )
        ] })
      ] })
    }
  );
}
export {
  R as default
};
//# sourceMappingURL=carousel.W81b4KVN.js.map
