import { useEffect, useState } from "react";
import { auth, signOut } from "../lib/fire";
import Apps from "./Apps";
import SignIn from "../SignIn";

function App() {
  const [user, setUser] = useState(null);

  useEffect(() => {
    const unsubscribe = auth.onAuthStateChanged((user) => {
      setUser(user);
    });
    return () => unsubscribe();
  }, []);

  const handleSignOut = async () => {
    await signOut(auth);
  };

  return (
    <div>
      {user ? (
        <div>
          <button onClick={handleSignOut}>Sign Out</button>
          <Apps />
        </div>
      ) : (
        <SignIn />
      )}
    </div>
  );
}

export default App;