import { Popover, PopoverButton, PopoverPanel } from "@headlessui/react";
import { More } from "iconsax-react";
import { type FC } from "react";
import TaskDetailLabelCheckbox from "../labels/TaskDetailLabelCheckbox";

type Props = {
  title: string;
  checked: boolean;
  onToggle: () => void;
  onEdit: () => void;
  onDelete: () => void;
};

const ChecklistItem: FC<Props> = ({ title, checked, onToggle, onEdit, onDelete }) => {
  return (
    <div className="flex gap-1 h-[27px] items-center">
      <TaskDetailLabelCheckbox checked={checked} onToggle={onToggle} />

      <div className="group flex justify-between flex-1 h-full hover:bg-white hover:bg-opacity-10 items-center px-2 relative">
        <div className="text-xs">{title}</div>

        <Popover className="relative">
          <PopoverButton className="flex items-center opacity-0 group-hover:opacity-100 data-[open]:opacity-100 transition-opacity outline-none">
            <More size={20} color="#000" />
          </PopoverButton>

          <PopoverPanel anchor="bottom end" className="z-[80] mt-1  rounded-[10px] bg-white shadow-md text-right p-3">
            <button type="button" onClick={onEdit} className="w-full text-sm text-right">
              ویرایش
            </button>

            <button type="button" onClick={onDelete} className="w-full mt-3 text-sm text-right text-[#FF0000]">
              پاک کردن
            </button>
          </PopoverPanel>
        </Popover>
      </div>
    </div>
  );
};

export default ChecklistItem;
