import { jsxs as c, jsx as o } from "react/jsx-runtime";
import { B as S } from "./BrickWrapper.DUMJ-X1W.js";
import { E as z } from "./EditableBrick.mVJOjFEX.js";
import { a as r } from "./twind.Cg2g8xBZ.js";
import { B as D } from "./BrickRoot.CQgjTuOI.js";
import { b as E } from "./use-section-style.CqWLdjop.js";
import { br as M } from "./use-page-data.BYLN5MSa.js";
function O({
  brick: s,
  editable: h,
  isDynamicPreview: T,
  iterationIndex: W,
  level: w = 0
}) {
  E(s);
  const g = Array.isArray(s.props.items) ? s.props.items : [], i = Array.isArray(s.props.$children) ? s.props.$children : [], l = s.props.layout || "left", v = s.props.showConnector !== !1, f = s.props.connectorColor, y = s.props.itemSpacing || "2rem", C = s.props.showIcons !== !1, N = s.props.iconSize || "md", m = s.props.showDates !== !1, p = s.props.datePosition || "top", n = s.props.colorPreset, b = r([
    "relative",
    // Color preset background
    n?.color && `bg-[${n.color}]/5`
  ]), $ = r([
    "absolute left-4 top-0 bottom-0 w-0.5",
    f?.color ? `bg-[${f.color}]` : "bg-gray-300",
    l === "right" && "left-auto right-4",
    l === "alternating" && "left-1/2 transform -translate-x-1/2"
  ]), B = (t) => {
    const e = l === "alternating", a = t % 2 === 0;
    return r([
      "relative flex items-start",
      `mb-[${y}]`,
      l === "right" && "flex-row-reverse",
      e && a && "flex-row-reverse",
      e && "justify-center"
    ]);
  }, A = (t) => {
    const e = l === "alternating", a = t % 2 === 0;
    return r([
      "flex-1 max-w-md",
      l === "left" && "ml-8",
      l === "right" && "mr-8 text-right",
      e && a && "mr-8 text-right",
      e && !a && "ml-8"
    ]);
  }, j = (t) => {
    const e = {
      sm: "w-6 h-6",
      md: "w-8 h-8",
      lg: "w-10 h-10"
    }, a = {
      completed: "bg-green-500 text-white",
      current: "bg-blue-500 text-white",
      upcoming: "bg-gray-400 text-white"
    };
    return r([
      "rounded-full flex items-center justify-center z-10 relative",
      e[N],
      t && a[t] || "bg-gray-500 text-white",
      n?.color && !t && `bg-[${n.color}] text-white`
    ]);
  }, I = (t) => r([
    "font-semibold text-lg",
    t && {
      completed: "text-green-700",
      current: "text-blue-700",
      upcoming: "text-gray-500"
    }[t] || "text-gray-900",
    n?.color && !t && `text-[${n.color}]`
  ]), d = () => r(["text-sm font-medium", n?.color ? `text-[${n.color}]` : "text-gray-600"]), P = (t, e) => {
    const a = i[e] && i[e].length > 0;
    return /* @__PURE__ */ c("div", { className: B(e), children: [
      C && /* @__PURE__ */ o("div", { className: j(t.status), children: t.icon ? /* @__PURE__ */ o("div", { className: "w-4 h-4 flex items-center justify-center", children: /* @__PURE__ */ o("span", { className: "iconify", "data-icon": t.icon }) }) : /* @__PURE__ */ o("div", { className: "w-2 h-2 bg-white rounded-full" }) }),
      /* @__PURE__ */ c("div", { className: A(e), children: [
        m && p === "top" && t.date && /* @__PURE__ */ o("div", { className: d(), children: t.date }),
        /* @__PURE__ */ o("h3", { className: I(t.status), children: t.title }),
        t.subtitle && /* @__PURE__ */ o("h4", { className: "text-base font-medium text-gray-600 mt-1", children: t.subtitle }),
        m && p === "inline" && t.date && /* @__PURE__ */ c("span", { className: r([d(), "ml-2"]), children: [
          "• ",
          t.date
        ] }),
        t.description && /* @__PURE__ */ o("p", { className: "text-gray-700 mt-2", children: t.description }),
        a && /* @__PURE__ */ o("div", { className: "mt-4", children: i[e].map((u, x) => /* @__PURE__ */ o(
          h ? z : S,
          {
            brick: u,
            index: x,
            level: w + 1
          },
          u.id || x
        )) }),
        m && p === "bottom" && t.date && /* @__PURE__ */ o("div", { className: r([d(), "mt-2"]), children: t.date })
      ] })
    ] }, t.id || e);
  };
  return /* @__PURE__ */ c(D, { editable: h, manifest: M, brick: s, className: b, children: [
    v && g.length > 1 && /* @__PURE__ */ o("div", { className: $ }),
    /* @__PURE__ */ o("div", { className: "relative", children: g.map((t, e) => P(t, e)) })
  ] });
}
export {
  O as default
};
