"use client";
import * as React from "react";
import * as TabsPrimitive from "@radix-ui/react-tabs";
import { cn } from "@/lib/utils";

export const Tabs = TabsPrimitive.Root;

export const TabsList = React.forwardRef<React.ElementRef<typeof TabsPrimitive.List>, React.ComponentPropsWithoutRef<typeof TabsPrimitive.List> & { variant?: "pill" | "underline" }>(
  ({ className, variant = "pill", ...props }, ref) => (
    <TabsPrimitive.List
      ref={ref}
      className={cn(
        variant === "pill"
          ? "inline-flex h-9 items-center gap-0.5 rounded-md bg-bg-muted p-1 text-fg-muted"
          : "flex items-center gap-4 border-b border-border text-fg-muted overflow-x-auto no-scrollbar",
        className,
      )}
      data-variant={variant}
      {...props}
    />
  ),
);
TabsList.displayName = "TabsList";

export const TabsTrigger = React.forwardRef<React.ElementRef<typeof TabsPrimitive.Trigger>, React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>>(({ className, ...props }, ref) => (
  <TabsPrimitive.Trigger
    ref={ref}
    className={cn(
      "inline-flex items-center justify-center gap-1.5 whitespace-nowrap text-[13px] font-medium transition-all disabled:pointer-events-none disabled:opacity-50",
      "[[data-variant=pill]_&]:rounded-[5px] [[data-variant=pill]_&]:px-3 [[data-variant=pill]_&]:h-7 [[data-variant=pill]_&]:data-[state=active]:bg-bg [[data-variant=pill]_&]:data-[state=active]:text-fg [[data-variant=pill]_&]:data-[state=active]:shadow-xs",
      "[[data-variant=underline]_&]:-mb-px [[data-variant=underline]_&]:border-b-2 [[data-variant=underline]_&]:border-transparent [[data-variant=underline]_&]:pb-2.5 [[data-variant=underline]_&]:pt-1 [[data-variant=underline]_&]:data-[state=active]:border-fg [[data-variant=underline]_&]:data-[state=active]:text-fg hover:text-fg",
      className,
    )}
    {...props}
  />
));
TabsTrigger.displayName = "TabsTrigger";

export const TabsContent = React.forwardRef<React.ElementRef<typeof TabsPrimitive.Content>, React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>>(({ className, ...props }, ref) => (
  <TabsPrimitive.Content ref={ref} className={cn("mt-4 focus-visible:outline-none", className)} {...props} />
));
TabsContent.displayName = "TabsContent";