"use client";
import { jsx, jsxs } from "react/jsx-runtime";
import * as React from "react";
import { Button } from "@open-mercato/ui/primitives/button";
import { cn } from "@open-mercato/shared/lib/utils";
import { Plus } from "lucide-react";
function DetailTabsLayout({
  tabs,
  activeTab,
  onTabChange,
  sectionAction,
  onSectionAction,
  navAriaLabel,
  className,
  headerClassName,
  navClassName,
  children
}) {
  const handleTabChange = React.useCallback(
    (id) => {
      onTabChange(id);
    },
    [onTabChange]
  );
  return /* @__PURE__ */ jsxs("div", { className: cn("space-y-4", className), children: [
    /* @__PURE__ */ jsxs("div", { className: cn("flex flex-wrap items-center justify-between gap-3", headerClassName), children: [
      /* @__PURE__ */ jsx(
        "nav",
        {
          className: cn("flex flex-wrap items-center gap-3 text-sm", navClassName),
          role: "tablist",
          "aria-label": navAriaLabel,
          children: tabs.map((tab) => /* @__PURE__ */ jsx(
            Button,
            {
              type: "button",
              variant: "ghost",
              size: "sm",
              role: "tab",
              "aria-selected": activeTab === tab.id,
              onClick: () => handleTabChange(tab.id),
              className: cn(
                "h-auto rounded-none border-b-2 px-0 py-1",
                activeTab === tab.id ? "border-accent-indigo text-foreground hover:bg-transparent" : "border-transparent text-muted-foreground hover:text-foreground hover:bg-transparent"
              ),
              children: tab.label
            },
            tab.id
          ))
        }
      ),
      sectionAction ? /* @__PURE__ */ jsxs(
        Button,
        {
          type: "button",
          size: "sm",
          onClick: onSectionAction,
          disabled: sectionAction.disabled,
          children: [
            sectionAction.icon ?? (typeof sectionAction.label === "string" || typeof sectionAction.label === "number" ? /* @__PURE__ */ jsx(Plus, { className: "mr-2 h-4 w-4" }) : null),
            sectionAction.label
          ]
        }
      ) : null
    ] }),
    /* @__PURE__ */ jsx("div", { children })
  ] });
}
export {
  DetailTabsLayout
};
//# sourceMappingURL=DetailTabsLayout.js.map
