import type { PopoverMenuProps } from "$/types/NavTypes";
import { Popover, PopoverButton, PopoverPanel } from "@headlessui/react";
import clsx from "clsx";
import { RiArrowRightSLine } from "react-icons/ri";

export default function PopoverMenu(props: PopoverMenuProps){
	const {
		buttonContent,
		anchor,
		children
	} = props;


	return (
		<Popover>
			<PopoverButton
				className={clsx(
					"flex flex-row flex-nowrap items-center justify-center",
					"cursor-pointer outline-none h-full"
				)}
			>
				{buttonContent} <RiArrowRightSLine strokeWidth={2} size={24}/>
			</PopoverButton>
			<PopoverPanel
				anchor={{to: anchor}}
				className={clsx(
					"flex flex-col items-start justify-center",
					"bg-(--bg-color) border border-neutral-400 outline-none mt-3"
				)}
			>
				{children}
			</PopoverPanel>
		</Popover>
	);
}