import React from "react";
import classnames from "classnames";
import PropTypes from "prop-types";

interface INavbarDropdownItemProps {
  role?: string;
  as?: React.ElementType;
  className?: string;
  isActive?: boolean;
  isDisabled?: boolean;
  href?: string;
  onClick?: (event: React.SyntheticEvent) => void;
  eventKey?: string;
}

const NavbarDropdownItem: React.FC<INavbarDropdownItemProps> = ({
  isActive,
  role,
  isDisabled,
  className,
  onClick,
  children,
  as: Component = "a",
  ...props
}) => {
  return (
    <Component
      {...props}
      role={role}
      onClick={onClick}
      className={classnames("dropdown-item", { active: isActive, disabled: isDisabled }, className)}
    >
      {children}
    </Component>
  );
};

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

export default NavbarDropdownItem;