import { NavigateAway as NavigateAwayIcon } from '@transferwise/icons';
import { clsx } from 'clsx';
import { useIntl } from 'react-intl';
import { PrimitiveAnchor } from '../primitives';
import type { PrimitiveAnchorProps } from '../primitives';

import { LinkLarge, LinkDefault } from '../common';

import messages from './Link.messages';

export type Props = PrimitiveAnchorProps & { type?: LinkLarge | LinkDefault };

/**
 * Standard Link component with navigate away icon
 *
 * Documentation: https://transferwise.github.io/neptune-web/components/content/Link
 */
const Link = ({
  className,
  children,
  href,
  target,
  type,
  'aria-label': ariaLabel,
  onClick,
  ...props
}: Props) => {
  const { formatMessage } = useIntl();
  const isBlank = target === '_blank';

  const classNames = clsx(
    'np-link',
    'd-inline-flex',
    {
      [`np-text-${type}`]: type,
    },
    className,
  );

  return (
    <PrimitiveAnchor
      href={href}
      target={target}
      className={classNames}
      aria-label={ariaLabel}
      rel={isBlank ? 'noreferrer' : undefined}
      onClick={onClick}
      {...props}
    >
      {children} {isBlank && <NavigateAwayIcon title={formatMessage(messages.opensInNewTab)} />}
    </PrimitiveAnchor>
  );
};

export default Link;
