"use client"
import firebase from "firebase/app";
import "firebase/auth"; // Import the Firebase authentication module

// Replace with your own Firebase SDK configuration details
const firebaseConfig = {
  apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
  storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
};

// Initialize Firebase
// if (!firebase.apps.length) {
//   firebase.initializeApp(firebaseConfig);
// }

if (typeof window !== 'undefined' && !firebase.apps.length) {
    firebase.initializeApp(firebaseConfig);
}
  

export const signInWithGoogle = () => {
    const provider = new firebase.auth.GoogleAuthProvider();
    return firebase.auth().signInWithPopup(provider);
};

export const signOut = () => {
    return firebase.auth().signOut();
};

export default firebase;

"use client"
import styles from "./page.module.css";
import React, { useContext } from "react";
import { AuthContext } from "../../contexts/AuthContext";
import { signInWithGoogle, signOut } from "../../lib/firebase";

export default function Home() {
  const { user } = useContext(AuthContext);

  return (
    <main className={styles.main}>

      <h1>Hello!</h1>

      {user ? (
        <div>
          <p>Welcome, {user.displayName}</p>
          <button onClick={signOut}>Sign Out</button>
        </div>
      ) : (
        <button onClick={signInWithGoogle}>Sign In with Google</button>
      )}

    </main>
  );
}