import * as React from "react"
import {
  Root as TabsRootPrimitive,
  List as TabsListPrimitive,
  Trigger as TabsTriggerPrimitive,
  Content as TabsContentPrimitive,
  type TabsProps as TabsPrimitiveProps,
  type TabsListProps as TabsPrimitiveListProps,
  type TabsTriggerProps as TabsPrimitiveTriggerProps,
  type TabsContentProps as TabsPrimitiveContentProps,
} from "@radix-ui/react-tabs"

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

type TabsProps = TabsPrimitiveProps & { className?: string }
type TabsListProps = TabsPrimitiveListProps & { className?: string }
type TabsTriggerProps = TabsPrimitiveTriggerProps & { className?: string }
type TabsContentProps = TabsPrimitiveContentProps & { className?: string }

const TabsRoot = TabsRootPrimitive as unknown as React.ComponentType<TabsProps>
const TabsListBase = TabsListPrimitive as unknown as React.ComponentType<TabsListProps>
const TabsTriggerBase = TabsTriggerPrimitive as unknown as React.ComponentType<TabsTriggerProps>
const TabsContentBase = TabsContentPrimitive as unknown as React.ComponentType<TabsContentProps>

export function Tabs({ className, ...props }: TabsProps) {
  return (
    <TabsRoot
      data-slot="tabs"
      className={cn("flex flex-col gap-2", className)}
      {...props}
    />
  )
}

export function TabsList({ className, ...props }: TabsListProps) {
  return (
    <TabsListBase
      data-slot="tabs-list"
      className={cn("inline-flex h-9 w-fit items-center justify-center rounded-lg bg-slate-100 p-[3px] text-slate-600", className)}
      {...props}
    />
  )
}

export function TabsTrigger({ className, value, ...props }: TabsTriggerProps) {
  return (
    <TabsTriggerBase
      data-slot="tabs-trigger"
      className={cn(
        "inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 whitespace-nowrap rounded-md border border-transparent px-2 py-1 text-sm font-medium text-slate-800 transition-[color,box-shadow] data-[state=active]:bg-white data-[state=active]:shadow-sm",
        className
      )}
      value={value}
      {...props}
    />
  )
}

export function TabsContent({ className, value, ...props }: TabsContentProps) {
  return (
    <TabsContentBase
      data-slot="tabs-content"
      className={cn("flex-1 outline-none", className)}
      value={value}
      {...props}
    />
  )
}