// src/App.jsx
import { createContext, useContext, useState } from "react";

const TabsContext = createContext(null);

function Tabs({ children }) {
  const [activeTab, setActiveTab] = useState(0);
  return (
    <TabsContext.Provider value={{ activeTab, setActiveTab }}>
      {children}
    </TabsContext.Provider>
  );
}

function Tab({ index, children }) {
  const { activeTab, setActiveTab } = useContext(TabsContext);
  return (
    <button
      onClick={() => setActiveTab(index)}
      style={{ fontWeight: activeTab === index ? "bold" : "normal" }}
    >
      {children}
    </button>
  );
}

function Panel({ index, children }) {
  const { activeTab } = useContext(TabsContext);
  return activeTab === index ? <div>{children}</div> : null;
}

Tabs.Tab = Tab;
Tabs.Panel = Panel;

function App() {
  return (
    <Tabs>
      <Tab index={0}>Profile</Tab>
      <Tab index={1}>Settings</Tab>
      <Tab index={2}>Billing</Tab>
      <Panel index={0}>Profile content</Panel>
      <Panel index={1}>Settings content</Panel>
      <Panel index={2}>Billing content</Panel>
    </Tabs>
  );
}

export default App;

/*
  Notes:
  - Tab and Panel never receive activeTab as a prop directly — both
    read it from TabsContext, set up entirely inside Tabs itself.
  - Only the Panel whose index matches the current activeTab renders
    its children; the other two return null.
*/