import { FaTrash } from "react-icons/fa";
import styles from "./MitgliederItemDelete.module.css";
import { useState } from "react";
import DeletePopUp from "./DeletePopUp";
import { User } from "../../../hooks/useUsers";

type MitgliederItemDeleteProps = {
  user: User;
  refetchUsers: () => Promise<void>;
  isDisabled?: boolean;
};

const MitgliederItemDelete = ({ user, refetchUsers, isDisabled = false }: MitgliederItemDeleteProps) => {
    const [deleteWindow, setDeleteWindow] = useState(false);

    return (
        <div className={styles.deleteBtnContainer}>
          <button 
            onClick={() => !isDisabled && setDeleteWindow(true)}
            className={`${styles.deleteBtn} ${isDisabled ? styles.disabled : ''}`}
            disabled={isDisabled}
            title={isDisabled ? "Cannot delete the only remaining user" : "Delete user"}>
            <FaTrash />
          </button>

          {deleteWindow && (
            <DeletePopUp 
              user={user} 
              closePopup={() => setDeleteWindow(false)}
              refetchUsers={refetchUsers}
            />
          )}
        </div>
    );
  };
  
  export default MitgliederItemDelete;