import { ReactNode, useCallback } from 'react';
import { useLocation, useNavigate } from 'react-router-dom';
import { getRouteSectionParent } from '../utils/routeParent';

type BackRouteHandlerProps = {
  children: (onBack: () => void) => ReactNode;
};
export function BackRouteHandler({ children }: BackRouteHandlerProps) {
  const navigate = useNavigate();
  const location = useLocation();

  const goBack = useCallback(() => {
    // Back arrow walks up the route tree to the section root — semantically
    // a "go up", not a "push parent". Replacing keeps the back-stack from
    // growing when the user repeatedly taps back on nested screens.
    const parent = getRouteSectionParent(location.pathname);
    if (parent) navigate(parent, { replace: true });
  }, [navigate, location.pathname]);

  return children(goBack);
}