'use client';

import React, { useMemo, type ReactNode } from 'react';
import { FirebaseProvider } from '@/firebase/provider';
import { initializeFirebase } from '@/firebase';

const AuthStateGate: React.FC<{ children: React.ReactNode }> = ({
  children,
}) => {
  // This component can be used to show a loading screen while firebase initializes if needed,
  // but for now we will just render children.
  // The actual auth check will be done in protected layouts.
  return <>{children}</>;
};

export function FirebaseClientProvider({ children }: { children: ReactNode }) {
  const firebaseServices = useMemo(() => {
    return initializeFirebase();
  }, []);

  return (
    <FirebaseProvider
      firebaseApp={firebaseServices.firebaseApp}
      auth={firebaseServices.auth}
      firestore={firebaseServices.firestore}
    >
      <AuthStateGate>{children}</AuthStateGate>
    </FirebaseProvider>
  );
}