'use client';

import { useState, useEffect } from 'react';
import { FirebaseProvider } from './provider';

interface FirebaseClientProviderProps {
  children: React.ReactNode;
}

/**
 * Ensures Firebase is initialized only once on the client and provides
 * the context to its children.
 */
export const FirebaseClientProvider: React.FC<FirebaseClientProviderProps> = ({ children }) => {
  const [isMounted, setIsMounted] = useState(false);

  useEffect(() => {
    setIsMounted(true);
  }, []);

  if (!isMounted) {
    return null; // Or a loading spinner
  }

  return <FirebaseProvider>{children}</FirebaseProvider>;
};