import { h as e } from "./chunk.BlbRoQQ3.js";
import { a5 as t } from "./use-page-data.Cb2SuuwJ.js";
import "./chunk-LSPN22SI.D75E3zS-.js";
import { c as n } from "./twind.BiM9xcCd.js";
import { b as r } from "./jsx-runtime.DF4K5VCp.js";
import "./chroma-js.Dcir27CH.js";
import "./color-system.Dp99zR0T.js";
import "./react.BZZIbN3T.js";
import "./iconBase.C7m0emOO.js";
import "./schema-resolver.p7B_pu36.js";
import { b as i, c as a } from "./fi.C2Y09MnC.js";
import { b as o } from "./use-brick-style.DDPl-_C1.js";
import "./use-brick-manifest.Iv9SG-7-.js";
import { b as s } from "./BrickRoot.DbISziyH.js";
import { useState as c } from "react";
var l = /* @__PURE__ */ e(r());
function u({ brick: e, editable: r }) {
	let { props: u } = e, d = o(e), f = (u.images || []).filter((e) => typeof e.src.src == "string" && e.src.src !== ""), [p, m] = c(0), h = () => {
		m((e) => Math.max(0, e - 1));
	}, g = () => {
		m((e) => Math.min(f.length - 1, e + 1));
	};
	return f.length === 0 ? /* @__PURE__ */ (0, l.jsx)(s, {
		brick: e,
		editable: r,
		manifest: t,
		className: n("flex flex-col items-center justify-center text-center", Object.values(d)),
		children: /* @__PURE__ */ (0, l.jsx)("div", {
			className: "p-8",
			children: r ? "Add images to this carousel in the panel" : "No images to display"
		})
	}) : /* @__PURE__ */ (0, l.jsx)(s, {
		brick: e,
		editable: r,
		manifest: t,
		className: n("flex flex-col", Object.values(d)),
		children: /* @__PURE__ */ (0, l.jsxs)("div", {
			className: n("relative overflow-hidden group flex-1"),
			children: [/* @__PURE__ */ (0, l.jsx)("div", {
				className: "flex transition-transform duration-300 ease-in-out absolute inset-0",
				style: { transform: `translateX(-${p * 100}%)` },
				children: f.map((e, t) => /* @__PURE__ */ (0, l.jsxs)("div", {
					className: "w-full flex-shrink-0 relative flex items-center justify-center",
					children: [/* @__PURE__ */ (0, l.jsx)("img", {
						src: e.src.src,
						alt: e.src.alt,
						className: n("w-full h-full object-cover"),
						style: { display: "block" }
					}), e.legend && /* @__PURE__ */ (0, l.jsx)("div", {
						className: "absolute bottom-0 left-0 right-0 bg-black/60 text-white text-sm p-3",
						children: e.legend
					})]
				}, t))
			}), f.length > 1 && /* @__PURE__ */ (0, l.jsxs)(l.Fragment, { children: [p > 0 && /* @__PURE__ */ (0, l.jsx)("button", {
				type: "button",
				onClick: h,
				className: n("absolute left-2 top-1/2 -translate-y-1/2", "rounded-full p-2 transition-all duration-200", "opacity-0 group-hover:opacity-100"),
				"aria-label": "Previous image",
				children: /* @__PURE__ */ (0, l.jsx)(i, { className: "w-5 h-5" })
			}), p < f.length - 1 && /* @__PURE__ */ (0, l.jsx)("button", {
				type: "button",
				onClick: g,
				className: n("absolute right-2 top-1/2 -translate-y-1/2", "rounded-full p-2 transition-all duration-200", "opacity-0 group-hover:opacity-100"),
				"aria-label": "Next image",
				children: /* @__PURE__ */ (0, l.jsx)(a, { className: "w-5 h-5" })
			})] })]
		})
	});
}
export { u as default };

//# sourceMappingURL=carousel.BnMuOuVe.js.map