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

function LoginButton() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  return (
    <div>
      {isLoggedIn ? (
        <button onClick={() => setIsLoggedIn(false)}>Log Out</button>
      ) : (
        <button onClick={() => setIsLoggedIn(true)}>Log In</button>
      )}
    </div>
  );
}

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

export default App;

/*
  Notes:
  - The ternary picks between two completely different <button>
    elements based on isLoggedIn.
  - Each button's onClick flips isLoggedIn to the opposite value,
    which causes the ternary to pick the other button next render.
*/