import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useMemo } from 'react';
import { styled, useStyleConfig, vui } from '../core';
import T from '../t';
import { cs, filterUndefined, isReactText, isString } from '../utils';
import { LinkProvider } from './context';
import LinkIcon from './linkIcon';
import LinkText from './linkText';
const linkSwipeAnimation = `
  @keyframes linkSwipe {
    from {
      background-size: 0 1px;
    }
    to {
      background-size: 100% 1px;
    }
  }
`;
export const LinkBase = styled.aBox.attrs((props) => ({
    isUnderlined: props.isUnderlined || false,
})) `
  ${linkSwipeAnimation}
  display: inline;
  cursor: pointer;
  position: relative;
  line-height: 1.5;
  outline: none;
  width: fit-content;
  text-decoration: none;

  &:not(.vui-linkNoUnderline) span {
    position: relative;
    background: linear-gradient(to right, currentcolor, currentcolor);
    background-size: ${({ isUnderlined }) => (isUnderlined ? '100% 1px' : '0 1px')};
    background-position: 0 100%;
    background-repeat: no-repeat;
    text-decoration: none;
    padding-bottom: 2px;
    line-height: 1;
  }

  &:hover span {
    animation: linkSwipe 0.3s ease forwards;
    background-size: 100% 1px;
  }
`;
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, { alignItems: iconLeft || iconRight ? 'center' : undefined, className: cs('vui-link', className), display: iconLeft || iconRight ? 'inline-flex' : 'inline', focusRing: 2, isUnderlined: isUnderlined, ref: ref, ...styles.container, ...aliasedProps, ...rest, children: [isString(iconLeft) ? _jsx(LinkIcon, { mr: 1, name: iconLeft }) : iconLeft, _jsx(T, { children: 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