/**
 * SSR-safe wrapper that renders children only on the client.
 *
 * Returns `null` during SSR. After hydration, renders children.
 * Used to wrap components that depend on browser APIs (e.g. Leaflet).
 *
 * @module
 */

import { useState, useEffect, type ReactNode } from "react";

export interface ClientOnlyProps {
  children: ReactNode;
  fallback?: ReactNode;
}

/**
 * Renders children only after component has mounted in the browser.
 * Returns `fallback` (default: null) during SSR and initial render.
 */
export function ClientOnly({ children, fallback = null }: ClientOnlyProps): JSX.Element {
  const [mounted, setMounted] = useState(false);

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

  return <>{mounted ? children : fallback}</>;
}
