import { useNavigate } from '#/lib/navigation.jsx';
import { cn } from '#/lib/utils.js';

/**
 * An in-app anchor. It is a real href so the link opens in a new tab and
 * reads correctly to a crawler, and a plain click routes without a reload.
 */
export function Link({ href, className, children, ...props }) {
  const navigate = useNavigate();
  return (
    <a
      href={href}
      className={cn('text-key hover:underline', className)}
      onClick={(event) => {
        // Leave the modified clicks to the browser: they mean a new tab or
        // a download, not navigation in this document.
        if (
          event.defaultPrevented ||
          event.metaKey ||
          event.ctrlKey ||
          event.shiftKey ||
          event.altKey ||
          event.button !== 0
        ) {
          return;
        }
        event.preventDefault();
        navigate(href);
      }}
      {...props}
    >
      {children}
    </a>
  );
}