import React from "react";
import { Icon } from "component/common.js";

const Link = props => {
  const {
    href,
    title,
    style,
    label,
    icon,
    badge,
    button,
    disabled,
    children,
    navigate,
    doNavigate,
  } = props;

  const className =
    (props.className || "") +
    (!props.className && !button ? "button-text" : "") + // Non-button links get the same look as text buttons
    (button ? " button-block button-" + button + " button-set-item" : "") +
    (disabled ? " disabled" : "");

  const onClick = !props.onClick && navigate
    ? () => {
        doNavigate(navigate);
      }
    : props.onClick;

  let content;
  if (children) {
    content = children;
  } else {
    content = (
      <span {...("button" in props ? { className: "button__content" } : {})}>
        {"icon" in props ? <Icon icon={icon} fixed={true} /> : null}
        {label ? <span className="link-label">{label}</span> : null}
        {"badge" in props ? <span className="badge">{badge}</span> : null}
      </span>
    );
  }

  return (
    <a
      className={className}
      href={href || "javascript:;"}
      title={title}
      onClick={onClick}
      {...("style" in props ? { style: style } : {})}
    >
      {content}
    </a>
  );
};

export default Link;