Context Menu

"use client";
import { useEffect, useState } from "react";

export function ContextMenu({ items, children }: { items: { label: string; run: () => void }[]; children: React.ReactNode }) {
  const [menu, setMenu] = useState<{ x: number; y: number } | null>(null);
  useEffect(() => {
    if (!menu) return;
    const close = () => setMenu(null);
    window.addEventListener("click", close);
    window.addEventListener("scroll", close, true);
    return () => { window.removeEventListener("click", close); window.removeEventListener("scroll", close, true); };
  }, [menu]);
  return (
    <>
      <div onContextMenu={(e) => { e.preventDefault(); setMenu({ x: e.clientX, y: e.clientY }); }}>{children}</div>
      {menu && (
        <div className="fixed z-50 w-40 rounded-lg border border-border bg-card py-1 shadow-lg animate-[fadeIn_0.15s_ease-out]"
          style={{ left: menu.x, top: menu.y }}>
          {items.map((item) => (
            <button key={item.label} onClick={item.run} className="w-full px-4 py-2 text-left text-sm hover:bg-muted">{item.label}</button>
          ))}
        </div>
      )}
    </>
  );
}