import React, { forwardRef } from "react";

import cn from "classnames";
import { AsComponent, AsPropsWithChildren } from "../utils/asComponent";

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

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

NavLink.displayName = "NavLink";

export default NavLink;