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

export const ScrollToTop = () => {
  const { pathname } = useLocation();

  useEffect(() => {
    const animationFrame = window.requestAnimationFrame(() => {
      window.scrollTo({ top: 0, left: 0, behavior: 'auto' });
      const mainElement = document.querySelector('main');
      if (mainElement instanceof HTMLElement) {
        if (typeof mainElement.scrollTo === 'function') {
          mainElement.scrollTo({ top: 0, left: 0, behavior: 'auto' });
        } else {
          mainElement.scrollTop = 0;
          mainElement.scrollLeft = 0;
        }
      }
    });

    return () => window.cancelAnimationFrame(animationFrame);
  }, [pathname]);

  return null;
};