import { useEffect, useState } from 'react';

/**
 * Tracks whether dark mode is active by observing the html.dark class.
 * Useful in components that don't receive the theme as a prop (showcase,
 * pricing backdrop) but must keep canvas/map content in sync with it.
 */
export function useIsDarkTheme(): boolean {
  const [isDark, setIsDark] = useState(() => document.documentElement.classList.contains('dark'));
  useEffect(() => {
    const observer = new MutationObserver(() =>
      setIsDark(document.documentElement.classList.contains('dark'))
    );
    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
    return () => observer.disconnect();
  }, []);
  return isDark;
}