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

export interface IListGroupProps extends AsPropsWithChildren, React.HTMLAttributes<HTMLElement> {
  header?: React.ReactNode;
}

type ListGroup = AsComponent<"ul", IListGroupProps>;
const ListGroup: ListGroup = forwardRef(
  ({ children, className, header, as: Component = "ul", ...props }, ref) => {
    const testId = props["data-testid"] || "honeyui-list-group";

    return (
      <Component ref={ref} {...props} className={cn("list-group", className)} data-testid={testId}>
        {header}
        {children}
      </Component>
    );
  }
);

ListGroup.propTypes = {
  className: PropTypes.string
};

ListGroup.displayName = "List Group";

export default ListGroup;