delete course button added in course section

src/modules/course/features/edit-course-dialog.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
 
 import { api } from "~/trpc/react";
 import { Button } from "~/components/ui/button";
@@ -17,6 +18,7 @@ import { Input } from "~/components/ui/input";
 import { Label } from "~/components/ui/label";
 import { Textarea } from "~/components/ui/textarea";
 import { useToast } from "~/hooks/use-toast";
+import { ConfirmDeleteDialog } from "~/modules/course/features/confirm-delete-dialog";
 
 interface EditCourseDialogProps {
     courseId: string;
@@ -37,7 +39,9 @@ export function EditCourseDialog({
         description ?? ""
     );
     const [isSubmitting, setIsSubmitting] = useState(false);
+    const [confirmDeleteOpen, setConfirmDeleteOpen] = useState(false);
     const { toast } = useToast();
+    const router = useRouter();
 
     const utils = api.useUtils();
 
@@ -67,6 +71,26 @@ export function EditCourseDialog({
         },
     });
 
+    const deleteCourse = api.course.delete.useMutation({
+        onSuccess: () => {
+            toast({
+                title: "Course deleted",
+                description: "The course has been removed.",
+            });
+            setConfirmDeleteOpen(false);
+            setOpen(false);
+            void utils.course.list.invalidate();
+            router.push("/course");
+        },
+        onError: (error) => {
+            toast({
+                title: "Delete failed",
+                description: error.message || "Failed to delete course",
+                variant: "destructive",
+            });
+        },
+    });
+
     const handleSubmit = async (e: React.FormEvent) => {
         e.preventDefault();
         if (!courseTitle.trim()) return;
@@ -118,7 +142,14 @@ export function EditCourseDialog({
                             />
                         </div>
                     </div>
-                    <DialogFooter>
+                    <DialogFooter className="flex items-center justify-between">
+                        <Button
+                            type="button"
+                            variant="destructive"
+                            onClick={() => setConfirmDeleteOpen(true)}
+                        >
+                            Delete Course
+                        </Button>
                         <Button
                             type="submit"
                             disabled={isSubmitting || !courseTitle.trim()}
@@ -128,6 +159,15 @@ export function EditCourseDialog({
                     </DialogFooter>
                 </form>
             </DialogContent>
+            <ConfirmDeleteDialog
+                open={confirmDeleteOpen}
+                title="Delete course?"
+                description="This will permanently delete the course and its contents."
+                confirmLabel="Delete Course"
+                isPending={deleteCourse.isPending}
+                onConfirm={() => deleteCourse.mutate({ id: courseId })}
+                onOpenChange={setConfirmDeleteOpen}
+            />
         </Dialog>
     );
 }