"use client";

import type { VariantProps } from "@karma/cva";
import { cva, cx } from "@karma/cva";
import * as TabsPrimitive from "@radix-ui/react-tabs";
import * as React from "react";

const tabsListVariants = cva({
  base: "inline-flex h-10 items-center justify-center rounded-md p-1",

  variants: {
    variant: {
      muted: "bg-muted text-secondary",
      accent: "bg-accent text-secondary",
      primary: "bg-primary text-primary",
    },
  },
  defaultVariants: {
    variant: "accent",
  },
});

export type TabsListProps = React.ComponentPropsWithoutRef<
  typeof TabsPrimitive.List
> &
  VariantProps<typeof tabsListVariants>;

export const TabsList = React.forwardRef<
  React.ElementRef<typeof TabsPrimitive.List>,
  TabsListProps
>(({ className, variant, ...props }, ref) => (
  <TabsPrimitive.List
    ref={ref}
    className={cx(tabsListVariants({ variant }), className)}
    {...props}
  />
));

TabsList.displayName = TabsPrimitive.List.displayName;