"use client";

import React, { createContext, useContext } from 'react';
import { app, auth, db, rtdb, storage } from "@/lib/firebase-client"; // Correctly import from the new client-side file
import { getAuth, Auth } from "firebase/auth";
import { getFirestore, Firestore } from "firebase/firestore";
import { getDatabase, Database } from "firebase/database";
import { getStorage, FirebaseStorage } from "firebase/storage";
import { FirebaseApp } from 'firebase/app';

interface FirebaseContextValue {
    app: FirebaseApp;
    auth: Auth;
    db: Firestore;
    rtdb: Database;
    storage: FirebaseStorage;
}

// The services are already initialized in firebase-client.ts, so we just pass them here.
const firebaseValue = { app, auth, db, rtdb, storage };

const FirebaseContext = createContext<FirebaseContextValue>(firebaseValue);

export const useFirebase = () => {
    const context = useContext(FirebaseContext);
    if (!context) {
        throw new Error("useFirebase must be used within a FirebaseProvider");
    }
    return context;
};

export const FirebaseProvider = ({ children }: { children: React.ReactNode }) => {
    return (
        <FirebaseContext.Provider value={firebaseValue}>
            {children}
        </FirebaseContext.Provider>
    );
};