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

function Toggle({ children }) {
  const [on, setOn] = useState(false);
  const toggle = () => setOn((v) => !v);

  return children({ on, toggle });
}

function ToggleButton() {
  return (
    <Toggle>
      {({ on, toggle }) => (
        <button onClick={toggle}>{on ? "ON" : "OFF"}</button>
      )}
    </Toggle>
  );
}

function ToggleCheckbox() {
  return (
    <Toggle>
      {({ on, toggle }) => (
        <label>
          <input type="checkbox" checked={on} onChange={toggle} />
          Enabled: {on ? "Yes" : "No"}
        </label>
      )}
    </Toggle>
  );
}

function App() {
  return (
    <div>
      <ToggleButton />
      <ToggleCheckbox />
    </div>
  );
}

export default App;

/*
  Notes:
  - Both ToggleButton and ToggleCheckbox render a completely different
    UI, but both reuse the exact same Toggle component and its on/toggle
    logic — neither duplicates the useState call or the toggle function.
  - children is called as a function (children({ on, toggle })) rather
    than rendered directly as JSX, which is what makes this a render
    props pattern rather than ordinary composition.
*/