difficulty filters and clickable badges

frontend/src/app/questions/[slug]/page.tsx

@@ -39,12 +39,15 @@ export default async function QuestionDetailPage({
       <div>
         <div className="flex items-start justify-between gap-4 mb-4">
           <h1 className="text-3xl font-bold">{question.title}</h1>
-          <Badge
-            variant={getDifficultyVariant(question.difficulty)}
-            aria-label={getDifficultyLabel(question.difficulty)}
-          >
-            {capitalize(question.difficulty)}
-          </Badge>
+          <Link href={`/questions?difficulty=${question.difficulty}`}>
+            <Badge
+              variant={getDifficultyVariant(question.difficulty)}
+              aria-label={getDifficultyLabel(question.difficulty)}
+              className="cursor-pointer hover:opacity-80"
+            >
+              {capitalize(question.difficulty)}
+            </Badge>
+          </Link>
         </div>
 
         <div className="flex flex-wrap gap-2 mb-4">