Add delete theme functionality to Edit Theme page

Introduced a delete button to the Edit Theme page, allowing users to delete themes with a confirmation prompt. Upon deletion, users are redirected to the event themes dashboard. Updated relevant imports and added a handler for the delete action.

frontend/src/app/(main)/dashboard/event-themes/[id]/edit/page.tsx

@@ -1,16 +1,19 @@
 "use client";
 
 import React, { useEffect } from "react";
-import { useParams } from "next/navigation";
+import { useParams, useRouter } from "next/navigation";
 import { useEventThemes } from "@/context/event-theme-context";
 import { Card, CardContent } from "@/components/ui/card";
-import { Loader2 } from "lucide-react";
+import { Loader2, Trash2 } from "lucide-react";
 import { EventThemeForm } from "@/components/event-themes/event-theme-form";
+import { Button } from "@/components/ui/button";
 
 export default function EditThemePage() {
   const params = useParams();
+  const router = useRouter();
   const themeId = params.id as string;
-  const { theme, isLoadingTheme, fetchThemeById } = useEventThemes();
+  const { theme, isLoadingTheme, fetchThemeById, deleteTheme } =
+    useEventThemes();
 
   useEffect(() => {
     if (themeId) {
@@ -18,6 +21,18 @@ export default function EditThemePage() {
     }
   }, [themeId, fetchThemeById]);
 
+  const handleDeleteTheme = async () => {
+    if (
+      themeId &&
+      confirm(
+        "Are you sure you want to delete this theme? This action cannot be undone.",
+      )
+    ) {
+      await deleteTheme(themeId);
+      router.push("/dashboard/event-themes");
+    }
+  };
+
   if (isLoadingTheme) {
     return (
       <Card className="w-full flex justify-center items-center p-12">
@@ -48,7 +63,17 @@ export default function EditThemePage() {
 
   return (
     <div className="container mx-auto py-6 space-y-6">
-      <h1 className="text-3xl font-bold">Edit Theme: {theme.name}</h1>
+      <div className="flex justify-between items-center">
+        <h1 className="text-3xl font-bold">Edit Theme: {theme.name}</h1>
+        <Button
+          variant="destructive"
+          onClick={handleDeleteTheme}
+          className="flex items-center gap-2"
+        >
+          <Trash2 className="h-4 w-4" />
+          Delete Theme
+        </Button>
+      </div>
       <p className="text-gray-600">
         Make changes to your theme. These changes will affect all events using
         this theme.