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

export interface INavbarItemProps extends AsPropsWithChildren, React.HTMLAttributes<HTMLElement> {
  active?: boolean;
  disabled?: boolean;
}

export type NavbarItem = AsComponent<'li', INavbarItemProps>;

const NavbarItem: NavbarItem = forwardRef(
  (
    {
      className,
      children,
      as: Component = "li",
      active,
      disabled,
      ...props
    },
    ref
  ) => {
    return (
      <Component
        {...props}
        ref={ref}
        className={classnames(
          "nav-item",
          className,
          !disabled && active && "active",
          disabled && "disabled"
        )}
      >
        {children}
      </Component>
    );
  }
);

NavbarItem.displayName = "NavbarItem";
NavbarItem.propTypes = {
  className: PropTypes.string,
  active: PropTypes.bool,
  disabled: PropTypes.bool
};

export default NavbarItem;