/**
 * @factory/ui — Tabs (Radix `@radix-ui/react-tabs` wrapper).
 * Radix handles roving tabindex, Arrow-key navigation, Home/End.
 */
import * as React from "react";
import * as RadixTabs from "@radix-ui/react-tabs";
import { clsx } from "clsx";

export const Tabs = RadixTabs.Root;
export const TabsContent = React.forwardRef<
  React.ElementRef<typeof RadixTabs.Content>,
  React.ComponentPropsWithoutRef<typeof RadixTabs.Content>
>(({ className, value, ...props }, ref) => (
  <RadixTabs.Content ref={ref} value={value} className={clsx("mt-3 focus:outline-none", className)} {...props} />
));
TabsContent.displayName = "TabsContent";

export const TabsList = React.forwardRef<
  React.ElementRef<typeof RadixTabs.List>,
  React.ComponentPropsWithoutRef<typeof RadixTabs.List>
>(({ className, ...props }, ref) => (
  <RadixTabs.List
    ref={ref}
    className={clsx("inline-flex items-center gap-1 rounded-md bg-secondary p-1", className)}
    {...props}
  />
));
TabsList.displayName = "TabsList";

export const TabsTrigger = React.forwardRef<
  React.ElementRef<typeof RadixTabs.Trigger>,
  React.ComponentPropsWithoutRef<typeof RadixTabs.Trigger>
>(({ className, value, ...props }, ref) => (
  <RadixTabs.Trigger
    ref={ref}
    value={value}
    className={clsx(
      "cursor-pointer rounded-sm px-3 py-1.5 text-sm font-medium text-muted-foreground",
      "transition-colors focus-visible:outline-2 focus-visible:outline-ring",
      "data-[state=active]:bg-card data-[state=active]:text-foreground data-[state=active]:shadow-sm",
      className,
    )}
    {...props}
  />
));
TabsTrigger.displayName = "TabsTrigger";