import React, { useCallback } from "react";
import { useNavigation } from "../navigation/hook";
/**
 * A navigational component that renders an `<a>` tag.
 *
 * @remarks
 * This component intercepts click events to perform client-side navigation using the
 * router's navigation context. It falls back to standard browser navigation if
 * modifier keys (Ctrl, Meta, Alt, Shift) are pressed or if the event is already prevented.
 *
 * @param props - The component props.
 * @returns The rendered anchor element.
 *
 * @example
 * ```tsx
 * <Link href="/users/123">View User</Link>
 * ```
 */
export function Link({ onClick, href, ...props }) {
    let { navigate } = useNavigation();
    let handleClick = useCallback((event) => {
        onClick?.(event);
        if (event.ctrlKey ||
            event.metaKey ||
            event.altKey ||
            event.shiftKey ||
            event.button !== 0) {
            return;
        }
        if (event.isDefaultPrevented()) {
            return;
        }
        event.preventDefault();
        navigate(href);
    }, [onClick, href, navigate]);
    return <a href={href} onClick={handleClick} {...props}/>;
}