import React from "react";
import { Tabs as BaseTabs } from "baseui/tabs-motion";
import { BrandColors } from "../tokens/colors";

export interface TabsProps {
  children: React.ReactNode;
}

/**
 * This is the `<Tabs>` component <br />
 * Use this navigate the user to certain parts of a page
 */
const Tabs: React.FC<TabsProps> = (props) => {
  const [activeKey, setActiveKey] = React.useState("0");
  return (
    <BaseTabs
      activeKey={activeKey}
      onChange={(tab) => {
        setActiveKey(tab.activeKey.toString());
      }}
      activateOnFocus
      overrides={{
        TabList: { style: () => ({}) },
        TabHighlight: {
          style: () => ({
            backgroundColor: BrandColors.primary.toString(),
          }),
        },
      }}
    >
      {props.children}
    </BaseTabs>
  );
};

export default Tabs;