import * as React from 'react'
import * as TabsPrimitive from '@radix-ui/react-tabs'
import tw from 'twin.macro'

const Tabs = TabsPrimitive.Root

const TabsList = React.forwardRef<
  React.ElementRef<typeof TabsPrimitive.List>,
  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
>(({ ...props }, ref) => (
  <TabsPrimitive.List
    ref={ref}
    tw="inline-flex items-center justify-center rounded-md bg-slate-100 p-1 dark:bg-slate-800"
    {...props}
  />
))
TabsList.displayName = TabsPrimitive.List.displayName

const TabsTrigger = React.forwardRef<
  React.ElementRef<typeof TabsPrimitive.Trigger>,
  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
>(({ ...props }, ref) => (
  <TabsPrimitive.Trigger
    css={tw`
      inline-flex
      min-w-[100px]
      items-center
      justify-center
      rounded-[0.185rem]
      px-3
      py-1.5
      text-sm
      font-medium
      text-slate-700
      transition-all
      disabled:pointer-events-none
      disabled:opacity-50
      data-[state=active]:bg-white
      data-[state=active]:text-slate-900
      data-[state=active]:shadow-sm
      dark:text-slate-200
      dark:data-[state=active]:bg-slate-900
      dark:data-[state=active]:text-slate-100
    `}
    tw=""
    {...props}
    ref={ref}
  />
))
TabsTrigger.displayName = TabsPrimitive.Trigger.displayName

const TabsContent = React.forwardRef<
  React.ElementRef<typeof TabsPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
>(({ ...props }, ref) => (
  <TabsPrimitive.Content
    tw="mt-2 rounded-md border border-slate-200 p-6 dark:border-slate-700"
    {...props}
    ref={ref}
  />
))
TabsContent.displayName = TabsPrimitive.Content.displayName

const _Tabs = Tabs
export {
  _Tabs as Root,
  TabsList as List,
  TabsTrigger as Trigger,
  TabsContent as Content,
}
