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

function useToggle(initialValue = false) {
  const [value, setValue] = useState(initialValue);

  function toggle() {
    setValue((v) => !v);
  }

  return [value, toggle];
}

function Sidebar() {
  const [isOpen, toggleIsOpen] = useToggle(false);

  return (
    <div>
      <button onClick={toggleIsOpen}>{isOpen ? "Close" : "Open"} sidebar</button>
      {isOpen && <p>Sidebar content here.</p>}
    </div>
  );
}

function PasswordInput() {
  const [showPassword, toggleShowPassword] = useToggle(false);

  return (
    <div>
      <input type={showPassword ? "text" : "password"} placeholder="Password" />
      <button onClick={toggleShowPassword}>{showPassword ? "Hide" : "Show"}</button>
    </div>
  );
}

function App() {
  return (
    <div>
      <Sidebar />
      <PasswordInput />
    </div>
  );
}

export default App;

/*
  Notes:
  - The exact same useToggle hook backs two completely unrelated
    pieces of UI — neither component knows or cares that the other
    one also uses it.
  - Each call to useToggle() creates its own independent state; the
    two booleans never interfere with each other.
*/