import { jsxs as o, jsx as t, Fragment as w } from "react/jsx-runtime";
import { ae as C } from "./_commonjsHelpers.BCwc0xb5.js";
import "@sinclair/typebox";
import { _ as r } from "./twind.BLUk_ZzT.js";
import { forwardRef as j, useState as k } from "react";
import { F as I, a as $ } from "./index.DkHvAvh_.js";
import { b as F } from "./use-section-style.Cg6VYj5D.js";
import { useDatasource as R } from "../use-datasource.js";
const B = j(({ brick: p }, h) => {
  const { props: s } = p, n = F(p), { datasourceId: S, data: T, isSample: y } = R(s.datasource, C.datasource), l = s.staticImages || [], c = s.title, m = s.navigation || "pager-dots";
  Object.values(n);
  const [i, d] = k(0), u = s.borderRadius || "rounded-md", g = m === "pager-arrows", v = m === "pager-dots", b = m === "pager-numbers", x = () => {
    d((e) => Math.max(0, e - 1));
  }, N = () => {
    d((e) => Math.min(l.length - 1, e + 1));
  }, f = (e) => {
    d(e);
  };
  return l.length === 0 ? /* @__PURE__ */ o(
    "div",
    {
      ref: h,
      className: r("flex flex-col flex-1 items-center justify-center p-8 bg-gray-100", u),
      children: [
        c && /* @__PURE__ */ t("div", { className: r("text-lg font-semibold mb-4", n.title), children: c }),
        /* @__PURE__ */ t("div", { className: "text-gray-500", children: "No images to display" })
      ]
    }
  ) : /* @__PURE__ */ o("div", { ref: h, className: r("flex flex-col flex-1", n.container), children: [
    c && /* @__PURE__ */ t("div", { className: r("text-lg w-full text-center font-semibold", n.title), children: c }),
    /* @__PURE__ */ o("div", { className: "relative group flex-1 flex flex-col min-h-0 gap-2", children: [
      s.editable && y && /* @__PURE__ */ t("div", { className: "absolute top-0 left-0 right-0 bottom-0 bg-white/30 rounded-lg flex items-center justify-center z-10", children: /* @__PURE__ */ o("div", { className: "text-white text-center rounded-md bg-black/30 p-4", children: [
        /* @__PURE__ */ t("div", { className: "text-2xl font-bold", children: "Carousel" }),
        /* @__PURE__ */ t("div", { className: "text-base", children: "Add images or edit content in the panel" })
      ] }) }),
      /* @__PURE__ */ o("div", { className: r("relative overflow-hidden flex-1 min-h-0", u), children: [
        /* @__PURE__ */ t(
          "div",
          {
            className: "flex transition-transform duration-300 ease-in-out absolute inset-0",
            style: { transform: `translateX(-${i * 100}%)` },
            children: l.map((e, a) => /* @__PURE__ */ o("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: r("w-full h-full object-cover", u),
                  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 })
            ] }, a))
          }
        ),
        l.length > 1 && /* @__PURE__ */ o(w, { children: [
          i > 0 && /* @__PURE__ */ t(
            "button",
            {
              type: "button",
              onClick: x,
              className: r(
                "absolute left-2 top-1/2 -translate-y-1/2",
                "bg-primary-light hover:bg-primary text-primary-content-light",
                "rounded-full p-2 transition-all duration-200",
                g ? "opacity-100" : "opacity-0 group-hover:opacity-100"
              ),
              "aria-label": "Previous image",
              children: /* @__PURE__ */ t(I, { className: "w-5 h-5" })
            }
          ),
          i < l.length - 1 && /* @__PURE__ */ t(
            "button",
            {
              type: "button",
              onClick: N,
              className: r(
                "absolute right-2 top-1/2 -translate-y-1/2",
                "bg-primary-light hover:bg-primary text-primary-content-light",
                "rounded-full p-2 transition-all duration-200",
                g ? "opacity-100" : "opacity-0 group-hover:opacity-100"
              ),
              "aria-label": "Next image",
              children: /* @__PURE__ */ t($, { className: "w-5 h-5" })
            }
          )
        ] })
      ] }),
      l.length > 1 && (v || b) && /* @__PURE__ */ t("div", { className: "flex justify-center gap-1 pb-2", children: b ? (
        // Numbered pagination
        l.map((e, a) => /* @__PURE__ */ t(
          "button",
          {
            type: "button",
            onClick: () => f(a),
            className: r(
              "w-6 h-6 rounded-full transition-all duration-200 text-xs font-medium",
              i === a ? "bg-primary text-primary-content" : "bg-primary-300 text-primary-content-light hover:bg-primary hover:text-primary-content"
            ),
            "aria-label": `Go to image ${a + 1}`,
            children: a + 1
          },
          a
        ))
      ) : (
        // Dots pagination
        l.map((e, a) => /* @__PURE__ */ t(
          "button",
          {
            type: "button",
            onClick: () => f(a),
            className: r(
              "w-2.5 h-2.5 rounded-full transition-all duration-200",
              i === a ? "bg-primary scale-110" : "bg-primary-300 hover:bg-primary"
            ),
            "aria-label": `Go to image ${a + 1}`
          },
          a
        ))
      ) })
    ] })
  ] });
});
export {
  B as default
};
//# sourceMappingURL=carousel.D2nDBSY-.js.map
