import * as classNames from "classnames";
import * as React from "react";

import { Icon } from "../Icon";

export enum LinkType {
  Standard = "standard",
  Boxed = "boxed",
}

export interface ILinkProps {
  href?: string;
  target?: string;
  text?: string;
  type?: LinkType;
  onClick?: () => boolean;
  className?: string;
}

export const Link = ({ className, href, target, text, type = LinkType.Standard, onClick }: ILinkProps) => (
  <a href={href} {...target && { target }} className={classNames("link", {
    [`link--${type}`]: type,
    [className]: className
  })} {...onClick && { onClick }}>
    {type === LinkType.Boxed && (
      <Icon icon="globe" width={17} height={17} vwidth={20} vheight={20} />
    )}
    <span className="link__text">{text}</span>
    {type === LinkType.Boxed && (
      <Icon icon="external" width={17} height={17} vwidth={20} vheight={20} />
    )}
  </a>
);