"use client"

import type {
	ITabsContentProps,
	ITabsListProps,
	ITabsProps,
	ITabsTriggerProps,
} from "./Tabs.d"
import type { JSX } from "react"

import { Tabs as RadixTabs } from "@radix-ui/themes"
import { forwardRef } from "react"

export const Tabs = forwardRef<HTMLDivElement, ITabsProps>(
	({ ...props }, ref): JSX.Element => <RadixTabs.Root ref={ref} {...props} />,
)

Tabs.displayName = "Tabs"

export const TabsList = forwardRef<HTMLDivElement, ITabsListProps>(
	({ ...props }, ref): JSX.Element => <RadixTabs.List ref={ref} {...props} />,
)

TabsList.displayName = "TabsList"

export const TabsTrigger = forwardRef<HTMLButtonElement, ITabsTriggerProps>(
	({ ...props }, ref): JSX.Element => (
		<RadixTabs.Trigger ref={ref} {...props} />
	),
)

TabsTrigger.displayName = "TabsTrigger"

export const TabsContent = forwardRef<HTMLDivElement, ITabsContentProps>(
	({ ...props }, ref): JSX.Element => (
		<RadixTabs.Content ref={ref} {...props} />
	),
)

TabsContent.displayName = "TabsContent"
