import { ComponentType } from "react";
import * as RadixTabs from "@radix-ui/react-tabs";

import { TabTrigger } from "./TabTrigger";
import { TabList } from "./TabList";

/**
 * @example
 * <Tabs>
 *   <Tabs.List>
 *     <Tabs.Trigger value="tab1">Tab 1</Tabs.Trigger>
 *     <Tabs.Trigger value="tab2">Tab 2</Tabs.Trigger>
 *   </Tabs.List>
 *   <Tabs.Content value="tab1">Content 1</Tabs.Content>
 *   <Tabs.Content value="tab2">Content 2</Tabs.Content>
 * </Tabs>
 */
export const Tabs = RadixTabs.Root as typeof RadixTabs.Root & {
  List: typeof TabList;
  Trigger: typeof TabTrigger;
  Content: ComponentType<RadixTabs.TabsContentProps>;
};

Tabs.List = TabList;
Tabs.Trigger = TabTrigger;
Tabs.Content = RadixTabs.Content;
