edr-platform/apps/edr-freight-web/backoffice/src/user-management/userManagement/dialogs/DeleteTeamMemberDialog.tsx

import {
  AlertDialog,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from "@/shared/common/ui/alert-dialog";
import { Button } from "@/shared/common/ui/button";
import { TeamMemberDto } from "@/user-management/dto/teamMember/teamMember";
import { useEmployeePositions } from "@/user-management/hooks/useEmployeePostions";
import { Loader2 } from "lucide-react";

interface DeleteTeamMemberDialogProps {
  isOpen: boolean;
  onClose: () => void;
  departmentId: string;
  departmentName: string;
  teamMemberId: string;
  teamMemberName: string;
}

export const DeleteTeamMemberDialog = ({
  departmentId,
  departmentName,
  isOpen,
  onClose,
  teamMemberId,
  teamMemberName,
}: DeleteTeamMemberDialogProps) => {
  if (!teamMemberId) return null;
  const { setInactive, isDeActivatingUser } = useEmployeePositions();

  const payload = {
    employeeId: teamMemberId,
    positionId: departmentId,
  };
  const onDelete = () => {
    setInactive({
      payload,
      successCallback: onClose,
    });
  };
  return (
    <AlertDialog open={isOpen} onOpenChange={onClose}>
      <AlertDialogContent>
        <AlertDialogHeader>
          <AlertDialogTitle>
            Remove team member from this position?
          </AlertDialogTitle>
          <AlertDialogDescription>
            Are you sure you want to remove <strong>{teamMemberName}</strong> from this position? They will be marked as inactive for this position. This action can be reversed by reassigning them to the position later.
          </AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel disabled={isDeActivatingUser}>
            Cancel
          </AlertDialogCancel>
          <Button
            variant="destructive"
            onClick={onDelete}
            disabled={isDeActivatingUser}
          >
            {isDeActivatingUser && (
              <Loader2 className="h-4 w-4 mr-2 animate-spin" />
            )}
            Remove
          </Button>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  );
};