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 ColumnMenu: FC<Props> = ({ onEdit, onDelete }) => {
  const { t } = useTranslation("global");

  return (
    <Popover className="relative">
      {({ close }) => (
        <>
          <PopoverButton
            className="flex items-center justify-center size-8 rounded-lg hover:bg-black/5 transition-colors outline-none shrink-0"
            onClick={(e) => e.stopPropagation()}
          >
            <More size={20} color="black" />
          </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={() => {
                close();
                onEdit();
              }}
              className="w-full px-4 py-2.5 text-right hover:bg-black/5 transition-colors"
            >
              {t("taskmanager.edit_column")}
            </button>
            <button
              type="button"
              onClick={() => {
                close();
                onDelete();
              }}
              className="w-full px-4 py-2.5 text-right text-red-500 hover:bg-red-50 transition-colors"
            >
              {t("taskmanager.delete_column")}
            </button>
          </PopoverPanel>
        </>
      )}
    </Popover>
  );
};

export default ColumnMenu;
