"use client"
import { useTranslations } from "next-intl";
import React, { useEffect, useRef, useState } from "react";
import { BsThreeDotsVertical } from "react-icons/bs";

interface OrderMenuProps {

}

export default function OrderMenu({ }: OrderMenuProps) {
  const menuRef = useRef<HTMLDivElement | null>(null);
  const [openMenu, setOpenMenu] = useState(false);
  const t = useTranslations();
  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
        setOpenMenu(false);
      }
    };

    document.addEventListener("mousedown", handleClickOutside);
    return () => {
      document.removeEventListener("mousedown", handleClickOutside);
    };
  }, []);

  return (
    <div className="relative" ref={menuRef}>
      <BsThreeDotsVertical
        size={18}
        className="text-gray-500 cursor-pointer dark:text-neutrals400"
        onClick={() => setOpenMenu((prev) => !prev)}
      />

      {openMenu && (
        <div className="absolute right-0 mt-2 w-28 bg-white border border-gray-100 dark:bg-background dark:border-darkborder shadow-md rounded z-50 rtl:right-auto rtl:left-0">
          <button
            className="block w-full text-left text-sm text-neutrals800 dark:text-neutrals400 px-4 py-2 hover:bg-gray-100 dark:hover:bg-darkbg"
            onClick={() => {
              setOpenMenu(false);
              // handleEdit();
            }}
          >
            {t("edit")}
          </button>

          <button
            className="block w-full text-left text-sm text-neutrals800 dark:text-neutrals400 px-4 py-2 hover:bg-gray-100 dark:hover:bg-darkbg"
            onClick={() => {
              setOpenMenu(false);
              // handleAdvertise();
            }}
          >
            {t("advertise")}
          </button>

          <button
            className="block w-full text-left text-sm text-red-600 px-4 py-2 hover:bg-gray-100 dark:hover:bg-darkbg"
            onClick={() => {
              setOpenMenu(false);
              // handleDelete();
            }}
          >
            {t("delete")}
          </button>
        </div>
      )}
    </div>
  );
}