Tabs

"use client"

import * as React from "react"
import { cva, type VariantProps } from "class-variance-authority"
import { Tabs as TabsPrimitive } from "radix-ui"

import { cn } from "@/lib/utils"

/**
 * Underline tabs for switching views of the same object. Selected = foreground text + 2px primary underline.
 * Counts go in a mono chip (TabsCount). Use the sidebar, not tabs, to switch between objects.
 * `segmented` is the compact pill switch for filters (Today / 7 days / 30 days).
 */
function Tabs({ className, orientation = "horizontal", ...props }: React.ComponentProps<typeof TabsPrimitive.Root>) {
  return (
    <TabsPrimitive.Root
      data-slot="tabs"
      data-orientation={orientation}
      orientation={orientation}
      className={cn("group/tabs flex gap-4 data-[orientation=horizontal]:flex-col", className)}
      {...props}
    />
  )
}

const tabsListVariants = cva("group/tabs-list inline-flex items-center text-muted-foreground", {
  variants: {
    variant: {
      default: "w-full gap-5 border-b border-border contrast:border-input",
      line: "w-full gap-5 border-b border-border contrast:border-input",
      segmented: "h-[34px] w-fit gap-0.5 rounded-md bg-muted p-[3px]",
    },
  },
  defaultVariants: { variant: "default" },
})

function TabsList({
  className,
  variant = "default",
  ...props
}: React.ComponentProps<typeof TabsPrimitive.List> & VariantProps<typeof tabsListVariants>) {
  return <TabsPrimitive.List data-slot="tabs-list" data-variant={variant} className={cn(tabsListVariants({ variant }), className)} {...props} />
}

function TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
  return (
    <TabsPrimitive.Trigger
      data-slot="tabs-trigger"
      className={cn(
        "relative inline-flex items-center justify-center gap-1.5 text-sm font-medium whitespace-nowrap transition-colors duration-fast ease-jc outline-none hover:text-foreground",
        "focus-ring disabled:pointer-events-none disabled:opacity-50",
        "[&_svg]:shrink-0 [&_svg]:stroke-[1.75] [&_svg:not([class*='size-'])]:size-4",
        "group-data-[variant=default]/tabs-list:h-10 group-data-[variant=line]/tabs-list:h-10",
        "group-data-[variant=default]/tabs-list:after:absolute group-data-[variant=default]/tabs-list:after:inset-x-0 group-data-[variant=default]/tabs-list:after:-bottom-px group-data-[variant=default]/tabs-list:after:h-0.5",
        "group-data-[variant=line]/tabs-list:after:absolute group-data-[variant=line]/tabs-list:after:inset-x-0 group-data-[variant=line]/tabs-list:after:-bottom-px group-data-[variant=line]/tabs-list:after:h-0.5",
        "aria-selected:text-foreground aria-selected:after:bg-primary",
        "group-data-[variant=segmented]/tabs-list:h-full group-data-[variant=segmented]/tabs-list:rounded-sm group-data-[variant=segmented]/tabs-list:px-2.5 group-data-[variant=segmented]/tabs-list:text-[13px]",
        "group-data-[variant=segmented]/tabs-list:aria-selected:pressed-state",
        className
      )}
      {...props}
    />
  )
}

/** Count chip inside a tab: "Open 42". */
function TabsCount({ className, ...props }: React.ComponentProps<"span">) {
  return <span data-slot="tabs-count" className={cn("rounded-sm bg-muted px-1.5 font-mono text-[11px] leading-[18px] text-muted-foreground", className)} {...props} />
}

function TabsContent({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Content>) {
  return <TabsPrimitive.Content data-slot="tabs-content" className={cn("flex-1 outline-none", className)} {...props} />
}

export { Tabs, TabsList, TabsTrigger, TabsContent, TabsCount, tabsListVariants }