import React, { forwardRef } from "react";
import classNames from "classnames";
import { StyledProps } from "../_type";
import { useConfig } from "../_util/config-context";

export interface MenuGroupProps extends StyledProps {
  /**
   * 标题
   */
  title?: React.ReactNode;

  /**
   * 菜单内容（Menu.SubMenu 或 Menu.Item）
   */
  children?: React.ReactNode;
}

export const MenuGroup = forwardRef(function MenuGroup(
  { title, children, className, ...props }: MenuGroupProps,
  ref: React.Ref<HTMLLIElement>
) {
  const { classPrefix } = useConfig();
  return (
    <>
      <li
        ref={ref}
        className={classNames(`${classPrefix}-menu__label`, className)}
        {...props}
      >
        <a className={`${classPrefix}-menu__item`}>
          <div className={`${classPrefix}-menu__text`}>{title}</div>
        </a>
      </li>
      {children}
    </>
  );
});

MenuGroup.displayName = "MenuGroup";