feat(components): add ProblemDescription component to render markdown

- Added ProblemDescription component that uses MDXRemote to render markdown content.
- Includes a Skeleton loader while content is loading and a horizontal scrollbar.
- Wrapped content in a ScrollArea with a max-height limit for better UI experience.

src/components/problem-description.tsx

@@ -0,0 +1,21 @@
+import { Suspense } from "react";
+import { MDXRemote } from "next-mdx-remote/rsc";
+import { Skeleton } from "@/components/ui/skeleton";
+import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
+
+interface ProblemDescriptionProps {
+  mdxSource: string;
+}
+
+export function ProblemDescription({ mdxSource }: ProblemDescriptionProps) {
+  return (
+    <ScrollArea className="[&>[data-radix-scroll-area-viewport]]:max-h-[calc(100vh-56px)]">
+      <Suspense fallback={<Skeleton className="h-full w-full" />}>
+        <div className="markdown-body">
+          <MDXRemote source={mdxSource} />
+        </div>
+      </Suspense>
+      <ScrollBar orientation="horizontal" />
+    </ScrollArea>
+  );
+}