import { Link, type LinkProps } from 'react-router';
import { useGlobalQueryString } from '../hooks/src/useQueryState';

export const NavLink = (props: LinkProps) => {
  const { children, ...rest } = props;
  const queryString = useGlobalQueryString();

  return (
    <Link {...rest} to={`${props.to}?${queryString}`}>
      {children}
    </Link>
  );
};