import { jsx as t, jsxs as i, Fragment as x } from "react/jsx-runtime";
import { ac as m } from "./chunk-3RDGTRSB.DySNCMmQ.js";
import "@sinclair/typebox";
import { _ as s } from "./twind.D7be0E5m.js";
import { useState as v } from "react";
import { F as y, a as b } from "./index.J_Xf_JGo.js";
import { b as N } from "./use-section-style.CihCUEtb.js";
import { u as w } from "./use-color-preset.BrT8DcA1.js";
import { B as u } from "./BrickRoot.C1PanknS.js";
function R({ brick: l, editable: f }) {
  const { props: d } = l, n = N(l), a = w(l), r = (d.images || []).filter(
    (e) => typeof e.src.src == "string" && e.src.src !== ""
  ), [o, c] = v(0), p = () => {
    c((e) => Math.max(0, e - 1));
  }, h = () => {
    c((e) => Math.min(r.length - 1, e + 1));
  };
  return r.length === 0 ? /* @__PURE__ */ t(
    u,
    {
      manifest: m,
      className: s(
        "flex flex-col items-center justify-center text-center",
        a.main,
        Object.values(n)
      ),
      children: /* @__PURE__ */ t("div", { className: "p-8", children: f ? "Add images to this carousel in the panel" : "No images to display" })
    }
  ) : /* @__PURE__ */ t(u, { manifest: m, className: s("flex flex-col", Object.values(n), a.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, g) => /* @__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 })
        ] }, g))
      }
    ),
    r.length > 1 && /* @__PURE__ */ i(x, { children: [
      o > 0 && /* @__PURE__ */ t(
        "button",
        {
          type: "button",
          onClick: p,
          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" })
        }
      ),
      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",
            a.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 {
  R as default
};
//# sourceMappingURL=carousel.DVer60uf.js.map
