import { Popover, PopoverButton, PopoverPanel } from "@headlessui/react";
import { More } from "iconsax-react";
import { FC } from "react";
import { useTranslation } from "react-i18next";

type Props = {
  onEdit: () => void;
  onDelete: () => void;
};

const ProjectCardMenu: FC<Props> = ({ onEdit, onDelete }) => {
  const { t } = useTranslation("global");

  return (
    <Popover className="relative">
      <PopoverButton className="flex items-center justify-center size-8 rounded-lg hover:bg-[#F4F5F9] transition-colors outline-none">
        <More size={20} color="#8C90A3" />
      </PopoverButton>

      <PopoverPanel
        anchor="bottom start"
        className="z-20 mt-1 min-w-[120px] rounded-xl bg-white shadow-md border border-border py-1 text-sm"
      >
        <button
          type="button"
          onClick={onEdit}
          className="w-full px-4 py-2.5 text-right hover:bg-[#F4F5F9] transition-colors"
        >
          {t("edit")}
        </button>
        <button
          type="button"
          onClick={onDelete}
          className="w-full px-4 py-2.5 text-right text-red-500 hover:bg-red-50 transition-colors"
        >
          {t("taskmanager.delete_project")}
        </button>
      </PopoverPanel>
    </Popover>
  );
};

export default ProjectCardMenu;