import { useState } from "react";
const App = () => {
  const [onOffStatus, setOnOffStatus] = useState(false);
  return (
    <div className="App" style={{ margin: "1rem" }}>
      <header className="App-header">
        <h1>Seriously, this is a React App</h1>
      </header>
      <main>
        <div
          className="clickButtonDiv"
          style={{ fontSize: "35pt", margin: "5rem" }}
        >
          <label htmlFor="on-off">{onOffStatus ? "🔥" : "❄️"}</label>
          <input
            style={{ transform: "scale(3)", margin: "30px" }}
            type="checkbox"
            name="on-off"
            id="onoff"
            defaultChecked={onOffStatus}
            onChange={() => setOnOffStatus(!onOffStatus)}
          />
        </div>
      </main>
    </div>
  );
}

export default App;