import {ReactNode, useState} from "react";
import Button from "../../../../../components/ui/Button/Button";
import Modal from "../../../../../components/ui/Modal/Modal";
import { useNavigate } from "react-router";
import deleteOtherUser from "../../../../../utils/users/deleteOtherUser";

export default function DeleteMemberBtn({name, id, className}: { name: string, id: number, className?: any }): ReactNode {

    const [open, setOpen] = useState(false);
    const navigate = useNavigate();

    const deleteMember = async () => {
        const result = await deleteOtherUser(id);

        if (result.status === 200 || result.status === 204) {
            setOpen(false);
            navigate("/volunteers");
        }
    }

    return <div className={className}>
        <Button variant={"danger"} onClick={() => setOpen(true)}>Désactiver</Button>

        <Modal open={open} onClose={() => setOpen(false)} title={"Supprimer"}>
            <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 15 }}>
                <p>Etes-vous sur de vouloir supprimer le compte {name} ?</p>
                <Button variant={"danger"} onClick={deleteMember}>Supprimer</Button>
            </div>
        </Modal>
    </div>
}