import classNames from 'classnames';
import React, { FC, ReactNode, RefObject } from 'react';

import LinkedinSVG from '../../assets/icons/social/linkedin.svg';
import MailSVG from '../../assets/icons/social/mail.svg';
import { getModifier } from '../../helpers/getModifier';
import css from './index.module.css';

export interface LinkProps {
  to?: string;
  tabIndex?: number;
  className?: string;
  variant?:
    | 'normal'
    | 'primary'
    | 'secondary'
    | 'tertiary'
    | 'navigation'
    | 'navigationBlue';
  target?: '_blank' | '_self' | '_parent' | '_top';
  ref?: RefObject<HTMLAnchorElement>;
  onClick?: (e) => void;
  ariaLabel?: string;
  isExternal?: boolean;
  onKeyDown?: (e) => void;
  children?: ReactNode;
  title?: string;
  icon?: 'email' | 'linkedin';
  rel?: string;
}

const Link: FC<LinkProps> = ({
  children,
  to,
  className,
  variant,
  target,
  ref,
  onClick,
  ariaLabel,
  isExternal = false,
  onKeyDown,
  tabIndex,
  title,
  icon,
  rel = '',
}) => {
  const linkClassNames = classNames(css.link, {
    [`${className}`]: className,
    [`${css[`link${getModifier(variant)}`]}`]: variant,
  });

  return (
    <a
      className={linkClassNames}
      tabIndex={tabIndex}
      aria-label={ariaLabel}
      onClick={onClick}
      ref={ref}
      href={to}
      data-testid="Link"
      target={isExternal ? '_blank' : target}
      rel={isExternal ? `noopener ${rel}` : rel}
      title={title}
      onKeyDown={onKeyDown}
    >
      {icon && (
        <span className={css.linkIcon}>
          {icon === 'email' && <MailSVG width="18px" />}
          {icon === 'linkedin' && <LinkedinSVG width="18px" />}
        </span>
      )}
      {children}
    </a>
  );
};

export default Link;