import { useState, Fragment } from "react";
import { jsx, jsxs } from "../node_modules/.pnpm/@emotion_react@11.10.4_q4mq7tnhdumujvomvw24zx33y4/node_modules/@emotion/react/jsx-runtime/dist/emotion-react-jsx-runtime.browser.esm.js";
import Tabs$1 from "../node_modules/.pnpm/@arco-design_web-react@2.40.1_biqbaboplfbrettd7655fr4n2y/node_modules/@arco-design/web-react/es/Tabs/tabs.js";
const TabPane = Tabs$1.TabPane;
function Tabs({
  tabs = [],
  title,
  changeTab,
  className,
  contentClassName,
  titleClassName,
  ...props
}) {
  const [activeTab, setActiveTab] = useState("key-0");
  const tabsData = tabs.map((item, index) => ({
    id: `key-${index}`,
    ...item
  }));
  return /* @__PURE__ */ jsx(Fragment, {
    children: /* @__PURE__ */ jsxs("div", {
      className,
      children: [title && /* @__PURE__ */ jsx("h2", {
        className: titleClassName || "mb-4 text-lg font-bold",
        children: title
      }), /* @__PURE__ */ jsx(Tabs$1, {
        activeTab,
        onChange: setActiveTab,
        children: tabsData.map((tab, index) => /* @__PURE__ */ jsx(TabPane, {
          title: tab.title || tab.name,
          ...tab,
          children: tab.content
        }, tab.id))
      })]
    })
  });
}
export {
  Tabs
};
//# sourceMappingURL=Tabs.js.map
