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

function TabButton({ label, isActive, onSelect }) {
  return (
    <button onClick={onSelect} style={{ fontWeight: isActive ? "bold" : "normal" }}>
      {label}
    </button>
  );
}

function TabContent({ activeTab }) {
  const content = {
    profile: "This is the profile tab content.",
    settings: "This is the settings tab content.",
  };

  return <p>{content[activeTab]}</p>;
}

function TabPanel() {
  const [activeTab, setActiveTab] = useState("profile");

  return (
    <div>
      <TabButton label="Profile" isActive={activeTab === "profile"} onSelect={() => setActiveTab("profile")} />
      <TabButton label="Settings" isActive={activeTab === "settings"} onSelect={() => setActiveTab("settings")} />
      <TabContent activeTab={activeTab} />
    </div>
  );
}

function App() {
  return <TabPanel />;
}

export default App;

/*
  Notes:
  - activeTab lives in TabPanel, the shared parent of both buttons
    and the content area.
  - Each TabButton calls its own onSelect (a different arrow function
    per button, set up the way Chapter 4 covered) to tell the parent
    which tab to switch to.
*/