import { useEffect } from "react";
import { useLocation } from "react-router-dom";

/**
 * Resets the window to the top on every route change. React Router does not
 * restore scroll on client navigation, so without this a short new page would
 * clamp to wherever the previous (taller) page was scrolled — e.g. landing at
 * the bottom of a category page after clicking a card far down the home grid.
 *
 * Skips navigations that carry a hash (`#post-<id>`, `#categories`, …) so
 * anchor / deep-link targets keep their own scroll handling.
 */
export function ScrollToTop() {
  const { pathname, hash } = useLocation();

  useEffect(() => {
    if (hash) return;
    window.scrollTo({ top: 0, left: 0 });
  }, [pathname, hash]);

  return null;
}