import { jsx, jsxs, Fragment } from "react/jsx-runtime";
import { aJ as manifest } from "./use-page-data.BgY0vKG4.js";
import { a as tx } from "./twind.DdSZmZu6.js";
import { useState } from "react";
import { F as FiChevronLeft, a as FiChevronRight } from "./index.xEpbMg6Y.js";
import { b as useBrickStyle } from "./use-section-style.BSe5at-8.js";
import { B as BrickRoot } from "./BrickRoot.D_a_fRJm.js";
function Carousel({ brick, editable }) {
  const { props } = brick;
  const styles = useBrickStyle(brick);
  const images = (props.images || []).filter(
    (image) => typeof image.src.src === "string" && image.src.src !== ""
  );
  const [currentIndex, setCurrentIndex] = useState(0);
  const goToPrevious = () => {
    setCurrentIndex((prevIndex) => Math.max(0, prevIndex - 1));
  };
  const goToNext = () => {
    setCurrentIndex((prevIndex) => Math.min(images.length - 1, prevIndex + 1));
  };
  if (images.length === 0) {
    return /* @__PURE__ */ jsx(
      BrickRoot,
      {
        brick,
        editable,
        manifest,
        className: tx("flex flex-col items-center justify-center text-center", Object.values(styles)),
        children: /* @__PURE__ */ jsx("div", { className: "p-8", children: editable ? "Add images to this carousel in the panel" : "No images to display" })
      }
    );
  }
  return /* @__PURE__ */ jsx(
    BrickRoot,
    {
      brick,
      editable,
      manifest,
      className: tx("flex flex-col", Object.values(styles)),
      children: /* @__PURE__ */ jsxs("div", { className: tx("relative overflow-hidden group flex-1"), children: [
        /* @__PURE__ */ jsx(
          "div",
          {
            className: "flex transition-transform duration-300 ease-in-out absolute inset-0",
            style: { transform: `translateX(-${currentIndex * 100}%)` },
            children: images.map((image, index) => /* @__PURE__ */ jsxs("div", { className: "w-full flex-shrink-0 relative flex items-center justify-center", children: [
              /* @__PURE__ */ jsx(
                "img",
                {
                  src: image.src.src,
                  alt: image.src.alt,
                  className: tx("w-full h-full object-cover"),
                  style: { display: "block" }
                }
              ),
              image.legend && /* @__PURE__ */ jsx("div", { className: "absolute bottom-0 left-0 right-0 bg-black/60 text-white text-sm p-3", children: image.legend })
            ] }, index))
          }
        ),
        images.length > 1 && /* @__PURE__ */ jsxs(Fragment, { children: [
          currentIndex > 0 && /* @__PURE__ */ jsx(
            "button",
            {
              type: "button",
              onClick: goToPrevious,
              className: tx(
                "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__ */ jsx(FiChevronLeft, { className: "w-5 h-5" })
            }
          ),
          currentIndex < images.length - 1 && /* @__PURE__ */ jsx(
            "button",
            {
              type: "button",
              onClick: goToNext,
              className: tx(
                "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__ */ jsx(FiChevronRight, { className: "w-5 h-5" })
            }
          )
        ] })
      ] })
    }
  );
}
export {
  Carousel as default
};
//# sourceMappingURL=carousel.ClPFTGxV.js.map
