import { j as jsxRuntimeExports } from "./jsx-runtime.CXYVdt5g.js";
import { B as BrickWrapper } from "./BrickWrapper.CKpu51yC.js";
import { E as EditableBrickWrapper } from "./EditableBrick._QgTWAFS.js";
import { a as tx } from "./twind.B1qQmF_s.js";
import { B as BrickRoot } from "./BrickRoot.C4Jpjw20.js";
import { b as useBrickStyle } from "./use-section-style.D8_SY6rK.js";
import { bR as manifest } from "./use-editor.CurXdZnZ.js";
import "@sinclair/typebox";
import "lodash-es";
function Timeline({
  brick,
  editable,
  isDynamicPreview,
  iterationIndex,
  level = 0
}) {
  useBrickStyle(brick);
  const items = Array.isArray(brick.props.items) ? brick.props.items : [];
  const children = Array.isArray(brick.props.$children) ? brick.props.$children : [];
  const layout = brick.props.layout || "left";
  const showConnector = brick.props.showConnector !== false;
  const connectorColor = brick.props.connectorColor;
  const itemSpacing = brick.props.itemSpacing || "2rem";
  const showIcons = brick.props.showIcons !== false;
  const iconSize = brick.props.iconSize || "md";
  const showDates = brick.props.showDates !== false;
  const datePosition = brick.props.datePosition || "top";
  const colorPreset = brick.props.colorPreset;
  const containerClasses = tx([
    "relative",
    // Color preset background
    colorPreset?.color && `bg-[${colorPreset.color}]/5`
  ]);
  const connectorClasses = tx([
    "absolute left-4 top-0 bottom-0 w-0.5",
    connectorColor?.color ? `bg-[${connectorColor.color}]` : "bg-gray-300",
    layout === "right" && "left-auto right-4",
    layout === "alternating" && "left-1/2 transform -translate-x-1/2"
  ]);
  const getItemClasses = (index) => {
    const isAlternating = layout === "alternating";
    const isEven = index % 2 === 0;
    return tx([
      "relative flex items-start",
      `mb-[${itemSpacing}]`,
      layout === "right" && "flex-row-reverse",
      isAlternating && isEven && "flex-row-reverse",
      isAlternating && "justify-center"
    ]);
  };
  const getContentClasses = (index) => {
    const isAlternating = layout === "alternating";
    const isEven = index % 2 === 0;
    return tx([
      "flex-1 max-w-md",
      layout === "left" && "ml-8",
      layout === "right" && "mr-8 text-right",
      isAlternating && isEven && "mr-8 text-right",
      isAlternating && !isEven && "ml-8"
    ]);
  };
  const getIconClasses = (status) => {
    const sizeMap = {
      sm: "w-6 h-6",
      md: "w-8 h-8",
      lg: "w-10 h-10"
    };
    const statusColorMap = {
      completed: "bg-green-500 text-white",
      current: "bg-blue-500 text-white",
      upcoming: "bg-gray-400 text-white"
    };
    return tx([
      "rounded-full flex items-center justify-center z-10 relative",
      sizeMap[iconSize],
      status && statusColorMap[status] || "bg-gray-500 text-white",
      colorPreset?.color && !status && `bg-[${colorPreset.color}] text-white`
    ]);
  };
  const getTitleClasses = (status) => {
    const statusColorMap = {
      completed: "text-green-700",
      current: "text-blue-700",
      upcoming: "text-gray-500"
    };
    return tx([
      "font-semibold text-lg",
      status && statusColorMap[status] || "text-gray-900",
      colorPreset?.color && !status && `text-[${colorPreset.color}]`
    ]);
  };
  const getDateClasses = () => {
    return tx(["text-sm font-medium", colorPreset?.color ? `text-[${colorPreset.color}]` : "text-gray-600"]);
  };
  const renderTimelineItem = (item, index) => {
    const hasChildren = children[index] && children[index].length > 0;
    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: getItemClasses(index), children: [
      showIcons && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: getIconClasses(item.status), children: item.icon ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-4 h-4 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "iconify", "data-icon": item.icon }) }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-2 h-2 bg-white rounded-full" }) }),
      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: getContentClasses(index), children: [
        showDates && datePosition === "top" && item.date && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: getDateClasses(), children: item.date }),
        /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: getTitleClasses(item.status), children: item.title }),
        item.subtitle && /* @__PURE__ */ jsxRuntimeExports.jsx("h4", { className: "text-base font-medium text-gray-600 mt-1", children: item.subtitle }),
        showDates && datePosition === "inline" && item.date && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: tx([getDateClasses(), "ml-2"]), children: [
          "• ",
          item.date
        ] }),
        item.description && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-gray-700 mt-2", children: item.description }),
        hasChildren && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-4", children: children[index].map((childBrick, childIndex) => {
          const ChildBrickComponent = editable ? EditableBrickWrapper : BrickWrapper;
          return /* @__PURE__ */ jsxRuntimeExports.jsx(
            ChildBrickComponent,
            {
              brick: childBrick,
              index: childIndex,
              level: level + 1
            },
            childBrick.id || childIndex
          );
        }) }),
        showDates && datePosition === "bottom" && item.date && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: tx([getDateClasses(), "mt-2"]), children: item.date })
      ] })
    ] }, item.id || index);
  };
  return /* @__PURE__ */ jsxRuntimeExports.jsxs(BrickRoot, { editable, manifest, brick, className: containerClasses, children: [
    showConnector && items.length > 1 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: connectorClasses }),
    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "relative", children: items.map((item, index) => renderTimelineItem(item, index)) })
  ] });
}
export {
  Timeline as default
};
//# sourceMappingURL=timeline.lflZcpZi.js.map
