import { EllipsisVertical } from "lucide-react";
import { type ReactNode, useRef, useState } from "react";
import { useClickOutside } from "../../hooks/use-click-outside.js";
import { Button } from "./button";

export interface OverflowMenuItem {
	readonly icon: ReactNode;
	readonly label: string;
	readonly onClick: () => void;
	readonly disabled?: boolean;
	readonly keepOpen?: boolean;
}

interface OverflowMenuProps {
	readonly items: readonly OverflowMenuItem[];
}

export function OverflowMenu({ items }: OverflowMenuProps) {
	const [open, setOpen] = useState(false);
	const ref = useRef<HTMLDivElement>(null);

	useClickOutside(ref, () => setOpen(false), open);

	return (
		<div ref={ref} className="relative">
			<Button
				type="button"
				variant="ghost"
				size="icon"
				className="text-muted-foreground hover:text-hover-neutral"
				onClick={() => setOpen((o) => !o)}
				aria-label="More actions"
				title="More actions"
			>
				<EllipsisVertical className="h-5 w-5" />
			</Button>
			{!!open && (
				<div className="card-glow absolute right-0 bottom-full z-50 mb-1 min-w-48 rounded-lg border border-border bg-card py-1">
					{items.map((item) => (
						<button
							key={item.label}
							type="button"
							className="flex w-full items-center gap-2 px-3 py-1.5 text-left text-foreground text-sm hover:bg-hover-neutral-bg disabled:pointer-events-none disabled:opacity-50"
							disabled={item.disabled}
							onClick={() => {
								item.onClick();
								if (!item.keepOpen) setOpen(false);
							}}
						>
							{item.icon}
							{item.label}
						</button>
					))}
				</div>
			)}
		</div>
	);
}