import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useMemo } from 'react';
import { styled, useStyleConfig, vui } from '../core';
import { cs, filterUndefined, isReactText, isString } from '../utils';
import { LinkProvider } from './context';
import LinkIcon from './linkIcon';
import LinkText from './linkText';
export const LinkBase = styled.aBox.attrs((props) => ({
    isUnderlined: props.isUnderlined || false,
})) `
  align-items: center;
  border-radius: none;
  cursor: pointer;
  display: inline-flex;
  line-height: normal;
  outline: none;
  text-decoration: none;
  transition-duration: instant;
  width: fit-content;
  position: relative;

  &:not(.vui-listItemLink)::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: ${props => (props.isUnderlined ? '1px' : '0')};
    background-color: currentColor;
    opacity: ${props => (props.isUnderlined ? '1' : '0')};
  }

  &:hover::after {
    height: 2px;
    opacity: 1;
  }
`;
/**
 * Displays a link item. Handles different underline scenarios and opening external links in new tab.
 * Exposes some props to the children via context.
 */
export const Link = vui((props, ref) => {
    const { children, className, fontWeight, iconLeft, iconRight, isExternal, isUnderlined, size, text, variant, weight, ...rest } = props;
    const styles = useStyleConfig('Link', props);
    const context = useMemo(() => filterUndefined({ size, variant }), [size, variant]);
    const aliasedProps = filterUndefined({
        fontWeight: weight || fontWeight,
        rel: isExternal ? 'noopener' : undefined,
        target: isExternal ? '_blank' : undefined,
    });
    return (_jsx(LinkProvider, { value: context, children: _jsxs(LinkBase, { className: cs('vui-link', className), focusRing: 2, isUnderlined: isUnderlined, ref: ref, ...styles.container, ...aliasedProps, ...rest, children: [isString(iconLeft) ? _jsx(LinkIcon, { mr: 1, name: iconLeft }) : iconLeft, children ?? (isReactText(text) ? _jsx(LinkText, { text: text }) : text), isString(iconRight) ? _jsx(LinkIcon, { ml: 1, name: iconRight }) : iconRight] }) }));
});
Link.Icon = LinkIcon;
Link.Text = LinkText;
Link.displayName = 'Link';
export default Link;
//# sourceMappingURL=link.js.map