import React from "react";
import {classes, Modify} from "../../Utils";
import {SubmenuFloat} from "./SubmenuFloat";

export type MainMenuItemProperties = React.PropsWithChildren<Modify<React.AnchorHTMLAttributes<HTMLAnchorElement>, {
}>>;

/**
 * Main component of a main menu item.
 */
export const MainMenuItem = React.forwardRef<HTMLAnchorElement, MainMenuItemProperties>(function SubmenuItem({children, ...props}: MainMenuItemProperties, ref)
{
	return (
		<li>
			<a ref={ref} {...props}>{children}</a>
		</li>
	);
});

/**
 * A main menu item that open a submenu.
 */
export function MainMenuItemSubmenu({submenu, className, children, ...props}: Modify<MainMenuItemProperties, {
	/**
	 * The submenu content.
	 */
	submenu: React.ReactNode;
}>)
{
	return (
		<SubmenuFloat submenu={submenu} role={"menu"} floatingOptions={{ placement: "bottom-start" }}>
			<MainMenuItem className={classes("submenu", className)} {...props}>{children}</MainMenuItem>
		</SubmenuFloat>
	);
}