improvements: address feedback

frontend/src/components/secret-syncs/DeleteSecretSyncModal.tsx

@@ -1,5 +1,7 @@
+import { useState } from "react";
+
 import { createNotification } from "@app/components/notifications";
-import { DeleteActionModal } from "@app/components/v2";
+import { DeleteActionModal, Switch } from "@app/components/v2";
 import { SECRET_SYNC_MAP } from "@app/helpers/secretSyncs";
 import { TSecretSync, useDeleteSecretSync } from "@app/hooks/api/secretSyncs";
 
@@ -12,6 +14,7 @@ type Props = {
 
 export const DeleteSecretSyncModal = ({ isOpen, onOpenChange, secretSync, onComplete }: Props) => {
   const deleteSync = useDeleteSecretSync();
+  const [removeSecrets, setRemoveSecrets] = useState(false);
 
   if (!secretSync) return null;
 
@@ -23,7 +26,8 @@ export const DeleteSecretSyncModal = ({ isOpen, onOpenChange, secretSync, onComp
     try {
       await deleteSync.mutateAsync({
         syncId,
-        destination
+        destination,
+        removeSecrets
       });
 
       createNotification({
@@ -37,7 +41,7 @@ export const DeleteSecretSyncModal = ({ isOpen, onOpenChange, secretSync, onComp
       console.error(err);
 
       createNotification({
-        text: `Failed remove ${destinationName} Sync`,
+        text: `Failed to remove ${destinationName} Sync`,
         type: "error"
       });
     }
@@ -50,6 +54,17 @@ export const DeleteSecretSyncModal = ({ isOpen, onOpenChange, secretSync, onComp
       title={`Are you sure want to delete ${name}?`}
       deleteKey={name}
       onDeleteApproved={handleDeleteSecretSync}
-    />
+    >
+      <Switch
+        containerClassName="mt-4"
+        className="bg-mineshaft-400/50 shadow-inner data-[state=checked]:bg-red/50"
+        thumbClassName="bg-mineshaft-800"
+        isChecked={removeSecrets}
+        onCheckedChange={setRemoveSecrets}
+        id="remove-secrets"
+      >
+        Remove Synced Secrets
+      </Switch>
+    </DeleteActionModal>
   );
 };