import { jsx, jsxs } from "react/jsx-runtime";
import { bz as manifest } from "./use-page-data.CMUQyNAA.js";
import "@sinclair/typebox";
import { B as BrickWrapper } from "./BrickWrapper.DbYQbPM-.js";
import { E as EditableBrickWrapper } from "./EditableBrick.CRrEMcPC.js";
import { a as tx } from "./twind.DdSZmZu6.js";
import { B as BrickRoot } from "./BrickRoot.D_a_fRJm.js";
import { b as useBrickStyle } from "./use-section-style.DjjgfIQS.js";
import { useState } from "react";
function Tabs({
  brick,
  editable,
  isDynamicPreview,
  iterationIndex,
  level = 0
}) {
  const styles = useBrickStyle(brick);
  const tabs = Array.isArray(brick.props.tabs) ? brick.props.tabs : [];
  const children = Array.isArray(brick.props.$children) ? brick.props.$children : [];
  const defaultTab = typeof brick.props.defaultTab === "number" ? brick.props.defaultTab : 0;
  const tabPosition = brick.props.tabPosition || "top";
  const tabStyle = brick.props.tabStyle || "underline";
  const fullWidth = brick.props.fullWidth || false;
  const padding = brick.props.padding || "1.5rem";
  const gap = brick.props.gap || "0.5rem";
  const [activeTab, setActiveTab] = useState(Math.max(0, Math.min(defaultTab, tabs.length - 1)));
  const safeActiveTab = Math.max(0, Math.min(activeTab, Math.min(tabs.length - 1, children.length - 1)));
  const activeChildren = Array.isArray(children[safeActiveTab]) ? children[safeActiveTab] : [];
  const getTabButtonClasses = (isActive) => {
    const baseClasses = "px-4 py-2 font-medium text-sm transition-all duration-200 cursor-pointer select-none";
    switch (tabStyle) {
      case "pills":
        return tx(
          baseClasses,
          "rounded-full",
          isActive ? "bg-blue-600 text-white shadow-sm" : "bg-gray-100 text-gray-700 hover:bg-gray-200"
        );
      case "bordered":
        return tx(
          baseClasses,
          "border border-gray-200 first:rounded-l-md last:rounded-r-md -ml-px first:ml-0",
          isActive ? "bg-blue-50 text-blue-700 border-blue-300 z-10 relative" : "bg-white text-gray-700 hover:bg-gray-50"
        );
      default:
        return tx(
          baseClasses,
          "border-b-2",
          isActive ? "border-blue-600 text-blue-700" : "border-transparent text-gray-600 hover:text-gray-800 hover:border-gray-300"
        );
    }
  };
  const getTabContainerClasses = () => {
    const baseClasses = "flex";
    if (fullWidth) {
      return tx(baseClasses, "w-full");
    }
    switch (tabStyle) {
      case "pills":
        return tx(baseClasses, "space-x-2");
      case "bordered":
        return tx(baseClasses);
      default:
        return tx(baseClasses, "border-b border-gray-200");
    }
  };
  const renderTabButtons = () => /* @__PURE__ */ jsx("div", { className: getTabContainerClasses(), style: { gap: tabStyle === "underline" ? gap : void 0 }, children: tabs.map((tab, index) => /* @__PURE__ */ jsx(
    "button",
    {
      type: "button",
      className: tx(getTabButtonClasses(index === safeActiveTab), fullWidth && "flex-1 text-center"),
      onClick: () => setActiveTab(index),
      disabled: editable,
      children: tab.label
    },
    tab.id || index
  )) });
  const renderTabContent = () => /* @__PURE__ */ jsxs("div", { className: tx("flex-1", brick.props.rounding || "rounded-md"), style: { padding }, children: [
    activeChildren.map(
      (child, index) => editable ? /* @__PURE__ */ jsx(
        EditableBrickWrapper,
        {
          brick: child,
          index,
          iterationIndex,
          isDynamicPreview
        },
        child.id
      ) : /* @__PURE__ */ jsx(BrickWrapper, { brick: child }, child.id)
    ),
    activeChildren.length === 0 && /* @__PURE__ */ jsx("div", { className: "text-gray-500 text-center py-8", children: editable ? "Drop bricks here to add content to this tab" : "No content available" })
  ] });
  if (tabs.length === 0) {
    return /* @__PURE__ */ jsx(
      BrickRoot,
      {
        editable,
        manifest,
        brick,
        className: tx("flex flex-col items-center justify-center text-center p-8", Object.values(styles)),
        children: /* @__PURE__ */ jsx("div", { className: "text-gray-500", children: editable ? "Configure tabs in the panel to get started" : "No tabs configured" })
      }
    );
  }
  return /* @__PURE__ */ jsxs(
    BrickRoot,
    {
      editable,
      manifest,
      className: tx("flex flex-col w-full", Object.values(styles)),
      brick,
      children: [
        tabPosition === "top" && renderTabButtons(),
        renderTabContent(),
        tabPosition === "bottom" && renderTabButtons()
      ]
    }
  );
}
export {
  Tabs as default
};
//# sourceMappingURL=tabs.B64E6U-j.js.map
