import type { ReactNode } from "react";

import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { cn } from "@/lib/utils";

export type TabsItem = {
  value: string;
  label: string;
  content: ReactNode;
};

export type TabsSwitcherProps = {
  items: TabsItem[];
  defaultValue?: string;
  variant?: "tabs" | "segmented";
};

export function TabsSwitcher({
  items,
  defaultValue,
  variant = "tabs"
}: TabsSwitcherProps) {
  const listClass =
    variant === "segmented"
      ? "rounded-full bg-muted/60 p-1"
      : "rounded-xl border border-border/70 bg-background/60 p-1.5";
  const triggerClass =
    variant === "segmented"
      ? "rounded-full data-[state=active]:bg-background data-[state=active]:shadow-sm"
      : "rounded-lg px-4 data-[state=active]:bg-primary/10 data-[state=active]:text-primary";

  return (
    <Tabs defaultValue={defaultValue ?? items[0]?.value}>
      <TabsList className={listClass}>
        {items.map((item) => (
          <TabsTrigger key={item.value} value={item.value} className={triggerClass}>
            {item.label}
          </TabsTrigger>
        ))}
      </TabsList>
      {items.map((item) => (
        <TabsContent key={item.value} value={item.value} className={cn("mt-4")}>
          {item.content}
        </TabsContent>
      ))}
    </Tabs>
  );
}