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

type itemVariants =
  | "primary"
  | "secondary"
  | "success"
  | "danger"
  | "warning"
  | "info"
  | "dark"
  | "light";

export interface IListGroupItemProps
  extends AsPropsWithChildren,
    React.HTMLAttributes<HTMLElement> {
  isActive?: boolean;
  onClick?: (event: React.SyntheticEvent) => void;
  variant?: itemVariants;
}

type ListGroupItem = AsComponent<"li", IListGroupItemProps>;
const ListGroupItem: ListGroupItem = forwardRef(
  ({ children, className, isActive, onClick, variant, as: Component = "li", ...props }, ref) => {
    const testId = props["data-testid"] || "honeyui-list-group-item";

    return (
      <Component
        {...props}
        ref={ref}
        className={cn(
          "list-group-item",
          {
            [`list-group-item-${variant}`]: variant,
            active: isActive,
            "cursor-pointer": onClick,
            "list-group-item-action": onClick || Component === "a"
          },
          className
        )}
        data-testid={testId}
        onClick={onClick}
      >
        {children}
      </Component>
    );
  }
);

ListGroupItem.propTypes = {
  className: PropTypes.string,
  isActive: PropTypes.bool,
  href: PropTypes.string,
  onClick: PropTypes.func,
  variant: PropTypes.string
};

ListGroupItem.displayName = "List Group Item";

export default ListGroupItem;