react_phx

import { useMemo, type AnchorHTMLAttributes, type ReactNode } from "react";

export interface LinkProps
  extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "href"> {
  /** Traditional browser navigation (full page reload). */
  href?: string | null;
  /** Patches the current LiveView (calls handle_params). */
  patch?: string | null;
  /** Navigates to a different LiveView within the same live_session. */
  navigate?: string | null;
  /** Whether to replace or push browser history. */
  replace?: boolean;
  children?: ReactNode;
}

/**
 * Phoenix LiveView Link component for React.
 *
 * Handles different types of navigation in Phoenix LiveView:
 * - href: Traditional browser navigation (full page reload)
 * - patch: Patches the current LiveView (calls handle_params)
 * - navigate: Navigates to a different LiveView within the same live_session
 * - replace: Whether to replace or push browser history
 */
export function Link({
  href = null,
  patch = null,
  navigate = null,
  replace = false,
  children,
  ...attrs
}: LinkProps): React.JSX.Element {
  const linkAttrs = useMemo(() => {
    if (!patch && !navigate) {
      return {
        href: href || "#",
      };
    }

    return {
      href: (navigate ? navigate : patch) || "#",
      "data-phx-link": navigate ? "redirect" : "patch",
      "data-phx-link-state": replace ? "replace" : "push",
    };
  }, [href, patch, navigate, replace]);

  return (
    <a {...attrs} {...linkAttrs}>
      {children}
    </a>
  );
}