import { NavigateAway as NavigateAwayIcon } from '@transferwise/icons';
import { clsx } from 'clsx';
import { AnchorHTMLAttributes } from 'react';
import { useIntl } from 'react-intl';

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

import messages from './Link.messages';

export type Props = AnchorHTMLAttributes<HTMLAnchorElement> & { 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 isBlank = target === '_blank';

  const { formatMessage } = useIntl();

  return (
    <a
      href={href}
      target={target}
      className={clsx('np-link', type ? `np-text-${type}` : undefined, 'd-inline-flex', className)}
      aria-label={ariaLabel}
      rel={isBlank ? 'noreferrer' : undefined}
      onClick={onClick}
      {...props}
    >
      {children} {isBlank && <NavigateAwayIcon title={formatMessage(messages.opensInNewTab)} />}
    </a>
  );
};

export default Link;
