/* eslint-disable react-hooks/exhaustive-deps */
/* eslint-disable @typescript-eslint/no-explicit-any */
import api from "../../utils/api";
import Button from "../Button";
import useModalStore from "../../stores/useModalStore";
import Close2Icon from "../icons/Close2Icon";

interface DeleteProjectModalProps {
  projectId: string;
}

function DeleteProjectModal({ projectId }: DeleteProjectModalProps) {
  const [setModal] = useModalStore((state) => [state.setModal]);

  async function deleteProject() {
    try {
      await api.delete(`projects/${projectId}`).json();
      setModal(null);
      window.location.reload();
    } catch (error) {
      if (error instanceof Error) {
        alert(`Error: ${error.message}`);
      }
    }
  }

  return (
    <div className="bg-white shadow-lg text-black p-8 rounded-xl flex flex-col gap-4">
      <div className="flex justify-between items-center border-b border-[#ccc] pb-4 gap-4">
        <p className="text-xl">Удаление проекта</p>
        <button
          onClick={() => setModal(null)}
          className="p-2 hover:bg-white hover:bg-opacity-10 transition-colors rounded-full"
        >
          <Close2Icon />
        </button>
      </div>

      <Button
        onClick={deleteProject}
        className="text-white self-end outline-none"
      >
        Удалить проект
      </Button>
    </div>
  );
}

export default DeleteProjectModal;
