import cx from "classnames";
import React from "react";

const CLASS_ROOT = "link";

export interface LinkProps {
  /** destination address */
  href?: string;
  /** rendered HTML element */
  tag?: "a" | "button";
  /** additional CSS classes */
  className?: string;
  /** link content */
  children?: React.ReactNode;
  /** whether the link should be underlined */
  isUnderline?: boolean;
  /** whether the link should have normal font weight */
  isNormal?: boolean;
  /** when true, adds the .no-accent modifier to disable orange accent color on hover (useful for dark backgrounds) */
  noAccent?: boolean;
}

export const Link: React.FC<LinkProps & React.HTMLAttributes<HTMLElement>> = ({
  className,
  children,
  isUnderline,
  isNormal,
  noAccent,
  tag = "a",
  href,
  ...other
}) => {
  const classes = cx(
    CLASS_ROOT,
    {
      underline: isUnderline,
      normal: isNormal,
      "no-accent": noAccent,
    },
    className,
  );

  if (tag === "a" && !href) {
    console.warn(
      "Anchor element requires a valid address. Provide a valid, navigable address as the href value. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#href",
    );
  }

  return React.createElement(
    tag,
    { href, className: classes, ...other },
    children,
  );
};

Link.displayName = "Link";