import React, { forwardRef } from "react";
import { MenuProps } from "antd/es/menu";
import Dropdown, { DropdownProps } from "antd/es/dropdown";

type AppDropdownProps = DropdownProps & {
  menu: MenuProps;
  children: React.ReactNode;
};

const AppDropdown = forwardRef<HTMLDivElement, AppDropdownProps>(
  (
    {
      menu,
      trigger = ["hover"],
      placement = "bottomLeft",
      className,
      dropdownRender,
      children,
      overlayClassName,
      ...props
    },
    ref,
  ) => {
    return (
      <div ref={ref}>
        <Dropdown
          menu={menu}
          trigger={trigger}
          placement={placement}
          className={className}
          dropdownRender={dropdownRender}
          overlayClassName={overlayClassName}
          {...props}
        >
          {children}
        </Dropdown>
      </div>
    );
  },
);

AppDropdown.displayName = "AppDropdown";

export default AppDropdown;