import * as TabsPrimitive from "@radix-ui/react-tabs";
import { forwardRef, type ComponentPropsWithoutRef, type ElementRef } from "react";

import { tabsContentVariants, tabsListVariants, tabsTriggerVariants } from "./tabs.variants";
import { cn } from "../lib/cn";
import { createDataAttributes, createSlot } from "../lib/contracts";

export function Tabs({
  className,
  orientation = "horizontal",
  ...props
}: ComponentPropsWithoutRef<typeof TabsPrimitive.Root>) {
  return (
    <TabsPrimitive.Root
      {...props}
      {...createSlot("root")}
      {...createDataAttributes({ orientation })}
      className={cn("flex flex-col", className)}
      orientation={orientation}
    />
  );
}

export const TabsList = forwardRef<
  ElementRef<typeof TabsPrimitive.List>,
  ComponentPropsWithoutRef<typeof TabsPrimitive.List>
>(function TabsList({ className, ...props }, ref) {
  return (
    <TabsPrimitive.List
      {...props}
      {...createSlot("list")}
      className={cn(tabsListVariants(), className)}
      ref={ref}
    />
  );
});

export const TabsTrigger = forwardRef<
  ElementRef<typeof TabsPrimitive.Trigger>,
  ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
>(function TabsTrigger({ className, disabled, ...props }, ref) {
  return (
    <TabsPrimitive.Trigger
      {...props}
      {...createSlot("trigger")}
      {...createDataAttributes({ disabled })}
      className={cn(tabsTriggerVariants(), className)}
      disabled={disabled}
      ref={ref}
    />
  );
});

export const TabsContent = forwardRef<
  ElementRef<typeof TabsPrimitive.Content>,
  ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
>(function TabsContent({ className, ...props }, ref) {
  return (
    <TabsPrimitive.Content
      {...props}
      {...createSlot("content")}
      className={cn(tabsContentVariants(), className)}
      ref={ref}
    />
  );
});