import { jsx } from "react/jsx-runtime";
import { Link } from "@mui/material";
import { FontVariantToken } from "@uipath/apollo-core";
import react, { useCallback } from "react";
import { ApTypography } from "../ap-typography/index.js";
const ApLink = /*#__PURE__*/ react.forwardRef(({ href, target = '_self', label, color, variant = FontVariantToken.fontSizeLink, tabIndex, onClick, 'data-testid': dataTestid, className, children, ...restProps }, ref)=>{
    const handleKeyDown = useCallback((event)=>{
        if (' ' === event.key || 'Enter' === event.key) {
            event.preventDefault();
            event.stopPropagation();
            if (href) if ('_blank' === target) window.open(href, '_blank');
            else window.location.href = href;
        }
    }, [
        href,
        target
    ]);
    return /*#__PURE__*/ jsx(Link, {
        ref: ref,
        href: href,
        target: target,
        "aria-label": label,
        tabIndex: tabIndex,
        onClick: onClick,
        onKeyDown: handleKeyDown,
        "data-testid": dataTestid,
        className: className,
        component: href ? 'a' : 'button',
        sx: {
            color: color || 'var(--color-foreground-link)',
            textDecoration: 'none',
            cursor: 'pointer',
            '&:hover': {
                textDecoration: 'underline'
            },
            '&:focus-visible': {
                outline: '2px solid var(--color-focus-indicator)',
                outlineOffset: '2px'
            }
        },
        ...restProps,
        children: /*#__PURE__*/ jsx(ApTypography, {
            variant: variant,
            style: {
                color: 'inherit'
            },
            children: children
        })
    });
});
ApLink.displayName = 'ApLink';
export { ApLink };
