import { j as jsxRuntimeExports } from "../../../../../_virtual/jsx-runtime.js";
import { a as P } from "../../../../sdk/dist/shared/chunk-NJGXC7D6.js";
import "../../../../sdk/dist/shared/chunk-3YVJ2ELD.js";
import "../../../../sdk/dist/shared/chunk-AFVJZPLS.js";
import "@sinclair/typebox";
import "../../../../sdk/dist/shared/chunk-A3GF4PYW.js";
import "../../../../sdk/dist/shared/chunk-W33JMRRN.js";
import { tx as D } from "../../../../style-system/dist/twind.js";
import { useState } from "react";
import { FiChevronLeft, FiChevronRight } from "../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.1.1/node_modules/react-icons/fi/index.js";
import { useBrickStyle } from "../hooks/use-brick-style.js";
import BrickRoot from "../components/BrickRoot.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__ */ jsxRuntimeExports.jsx(
      BrickRoot,
      {
        brick,
        editable,
        manifest: P,
        className: D("flex flex-col items-center justify-center text-center", Object.values(styles)),
        children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-8", children: editable ? "Add images to this carousel in the panel" : "No images to display" })
      }
    );
  }
  return /* @__PURE__ */ jsxRuntimeExports.jsx(
    BrickRoot,
    {
      brick,
      editable,
      manifest: P,
      className: D("flex flex-col", Object.values(styles)),
      children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: D("relative overflow-hidden group flex-1"), children: [
        /* @__PURE__ */ jsxRuntimeExports.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__ */ jsxRuntimeExports.jsxs("div", { className: "w-full flex-shrink-0 relative flex items-center justify-center", children: [
              /* @__PURE__ */ jsxRuntimeExports.jsx(
                "img",
                {
                  src: image.src.src,
                  alt: image.src.alt,
                  className: D("w-full h-full object-cover"),
                  style: { display: "block" }
                }
              ),
              image.legend && /* @__PURE__ */ jsxRuntimeExports.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__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
          currentIndex > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(
            "button",
            {
              type: "button",
              onClick: goToPrevious,
              className: D(
                "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__ */ jsxRuntimeExports.jsx(FiChevronLeft, { className: "w-5 h-5" })
            }
          ),
          currentIndex < images.length - 1 && /* @__PURE__ */ jsxRuntimeExports.jsx(
            "button",
            {
              type: "button",
              onClick: goToNext,
              className: D(
                "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__ */ jsxRuntimeExports.jsx(FiChevronRight, { className: "w-5 h-5" })
            }
          )
        ] })
      ] })
    }
  );
}
export {
  Carousel as default
};
//# sourceMappingURL=carousel.js.map
