import React, { forwardRef } from "react";
import classnames from "classnames";
import PropTypes from "prop-types";
import { AsComponent, AsPropsWithChildren } from "../utils/asComponent";

export interface INavLinkProps extends AsPropsWithChildren, React.HTMLAttributes<HTMLElement> {
  role?: string;
  isActive?: boolean;
  isDisabled?: boolean;
  onClick?: (event: React.SyntheticEvent) => void;
  eventKey?: string;
}

type NavLink = AsComponent<'a', INavLinkProps>;

const NavLink: NavLink = forwardRef(
  (
    { isActive, role, isDisabled, className, onClick, children, as: Component = "a", ...props },
    ref
  ) => {
    return (
      <Component
        className={classnames("nav-link", { active: isActive, disabled: isDisabled }, className)}
        onClick={onClick}
        ref={ref}
        role={role}
        {...props}
      >
        {children}
      </Component>
    );
  }
);

NavLink.displayName = "NavLink";
NavLink.propTypes = {
  className: PropTypes.string,
  role: PropTypes.string,
  isActive: PropTypes.bool,
  isDisabled: PropTypes.bool,
  href: PropTypes.string,
  onClick: PropTypes.func,
  eventKey: PropTypes.string
};

export default NavLink;