import React, { useState } from "react";
import * as Tabs from "@radix-ui/react-tabs";

import { RootElementContext } from "./context";
import { RootProps } from "./types";

export const Root = ({ options, children}: RootProps) => {
  const [activeTab, setActiveTab] = useState(options.include[0]);

  return (
    <RootElementContext.Provider
      value={{
        ...options,
        activeTab,
        setActiveTab
      }}
    >
      <Tabs.Root value={activeTab}>
        {children}
      </Tabs.Root>
    </RootElementContext.Provider>
  );
}

// Export children
export { Tabs } from "./Tabs";
export { Content } from "./Content";