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

function LightSwitch() {
  const [isOn, setIsOn] = useState(false);

  return (
    <div>
      <p>{isOn ? "On" : "Off"}</p>
      <button onClick={() => setIsOn(!isOn)}>Toggle</button>
    </div>
  );
}

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

export default App;

/*
  Notes:
  - setIsOn(!isOn) flips the boolean each click — true becomes false
    and vice versa.
  - The displayed text uses a ternary on the same isOn value, so it
    always matches the current state.
*/