import React from "react";
import {Float, FloatProperties} from "../Floating/Float";
import {classes, Modify} from "../../Utils";

export function Suggestible({className, suggestions, mode, content, role, children, ...props}: Modify<FloatProperties, {
	/**
	 * Suggestions element.
	 */
	suggestions: React.ReactNode;

	content?: never;
	role?: never;
}>)
{
	// Default mode for showing suggestions is "focus".
	mode = mode ?? "focus";

	return (
		<Float className={classes("suggestions", className)} role={"select"} content={suggestions} mode={mode} {...props}>
			{children}
		</Float>
	);
}