import { FC } from "react";
import { useRef } from "react";
import useOnclickOutside from "@/hooks/useOnClickOutside";

interface ContextMenuProps {
  x: number;
  y: number;
  closeContextMenu: () => void;
  file?: any;
}

const ContextMenuContainer: FC<ContextMenuProps> = ({
  x,
  y,
  closeContextMenu,
  file,
}) => {
  const contextMenuRef = useRef<HTMLDivElement>(null);
  useOnclickOutside(contextMenuRef, closeContextMenu);

  return (
    <>
      <div
        ref={contextMenuRef}
        onClick={closeContextMenu}
        className="bg-primary text-white p-2 rounded-md cursor-pointer"
        style={{ position: "absolute", top: y, left: x }}
      >
        <div
          onClick={() => {
            console.log("Option ", file?.attributes.name);
          }}
        >
          {file?.attributes.name}
        </div>
        <div>Option 2</div>
        <div>Option 3</div>
      </div>
    </>
  );
};

export default ContextMenuContainer;