import { useCallback, useSyncExternalStore } from 'react';

import type { DocumentHandle } from './types';

/** Re-render when `handle.getTitle()` may have changed. */
export function useDocumentTitle(handle: DocumentHandle | null): string {
  return useSyncExternalStore(
    useCallback(
      (onChange: () => void) => {
        if (!handle) return () => undefined;
        return handle.subscribeTitle(onChange);
      },
      [handle],
    ),
    useCallback(() => handle?.getTitle() ?? '', [handle]),
    useCallback(() => '', []),
  );
}