'use client';

// src/components/Tabs/Tabs.tsx
import * as React from "react";
import { cn } from "@paalan/react-shared/lib";
import * as TabsPrimitive from "@radix-ui/react-tabs";
import { jsx, jsxs } from "react/jsx-runtime";
var TabsRoot = TabsPrimitive.Root;
var TabsList = React.forwardRef(({ className, strip, ...props }, ref) => /* @__PURE__ */ jsx(
  TabsPrimitive.List,
  {
    ref,
    className: cn(
      "inline-flex items-center justify-center",
      {
        "h-9 rounded-lg  bg-muted p-1 text-muted-foreground": !strip,
        " border-b border-gray-300 bg-background text-foreground": strip
      },
      className
    ),
    ...props
  }
));
TabsList.displayName = TabsPrimitive.List.displayName;
var TabsTrigger = React.forwardRef(({ className, strip, ...props }, ref) => /* @__PURE__ */ jsx(
  TabsPrimitive.Trigger,
  {
    ref,
    className: cn(
      "inline-flex items-center justify-center whitespace-nowrap px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
      {
        "rounded-md data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow": !strip,
        "cursor-pointer py-2 outline-none hover:text-primary data-[state=active]:text-primary data-[state=active]:shadow-[inset_0_-1px_0_0,0_1px_0_0]": strip
      },
      className
    ),
    ...props
  }
));
TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
var TabsContent = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
  TabsPrimitive.Content,
  {
    ref,
    className: cn(
      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
      className
    ),
    ...props
  }
));
TabsContent.displayName = TabsPrimitive.Content.displayName;
var Tabs = React.forwardRef(
  ({
    activeTab: tab,
    onTabChange,
    tabs,
    tabListClassName,
    triggerClassName: allTriggerClassName,
    contentClassName: allContentClassName,
    strip = true,
    ...props
  }, ref) => {
    const [activeTab, setActiveTab] = React.useState(tab);
    React.useEffect(() => {
      setActiveTab(tab);
    }, [tab]);
    const onTabChangeHandle = (value) => {
      setActiveTab(value);
      onTabChange?.(value);
    };
    return /* @__PURE__ */ jsxs(TabsRoot, { ...props, value: activeTab, onValueChange: onTabChangeHandle, ref, children: [
      /* @__PURE__ */ jsx(TabsList, { className: tabListClassName, strip, children: tabs.map(({ label, value, triggerClassName }) => /* @__PURE__ */ jsx(TabsTrigger, { value, className: cn(allTriggerClassName, triggerClassName), strip, children: label }, value)) }),
      tabs.map(({ value, content, contentClassName }) => /* @__PURE__ */ jsx(React.Fragment, { children: !!content && /* @__PURE__ */ jsx(TabsContent, { value, className: cn(allContentClassName, contentClassName), children: content }) }, value))
    ] });
  }
);
export {
  Tabs,
  TabsContent,
  TabsList,
  TabsRoot,
  TabsTrigger
};
