"use client";

import { Suspense, useEffect } from "react";
import { usePathname, useSearchParams } from "next/navigation";

import { formatDocumentTitle, resolvePageTitle } from "@/lib/document-title";

function DocumentTitleInner() {
  const pathname = usePathname();
  const searchParams = useSearchParams();

  useEffect(() => {
    const search = searchParams.toString();
    document.title = formatDocumentTitle(resolvePageTitle(pathname, search ? `?${search}` : ""));
  }, [pathname, searchParams]);

  return null;
}

/** Keeps `document.title` in sync with the current route / nav label. */
export function DocumentTitle() {
  return (
    <Suspense fallback={null}>
      <DocumentTitleInner />
    </Suspense>
  );
}