app/components/theme-provider.tsx

"use client";

import * as React from "react";
import { ThemeProvider as NextThemesProvider } from "next-themes";

/**
 * Custom ThemeProvider component that wraps next-themes provider
 * with hydration mismatch prevention.
 *
 * This component ensures theme switching functionality works correctly
 * by only rendering after initial client-side mount to prevent
 * hydration mismatches between server and client rendering.
 *
 * @param children - Child components to be wrapped by the theme provider
 * @param props - Additional props passed to NextThemesProvider
 */
export function ThemeProvider({
  children,
  ...props
}: React.ComponentProps<typeof NextThemesProvider>) {
  // Track whether component has mounted on client-side
  const [mounted, setMounted] = React.useState(false);

  // Set mounted state to true after initial client-side render
  // This ensures we only render content after hydration is complete
  React.useEffect(() => {
    setMounted(true);
  }, []);

  // Return null on server-side and initial client-side render
  // to prevent hydration mismatch with theme preferences
  if (!mounted) {
    return null;
  }

  // Once mounted, render the theme provider with children
  return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
}