feat: Implement course discovery page with API integration, useCourse composable, and CourseCard component.

Frontend-Learner/pages/browse/discovery.vue

@@ -83,14 +83,23 @@ const visibleCategories = computed(() => {
   return showAllCategories.value ? categories : categories.slice(0, 8);
 });
 
+// Helper to get localized text
+const getLocalizedText = (text: string | { th: string; en: string } | undefined) => {
+  if (!text) return ''
+  if (typeof text === 'string') return text
+  return text.th || text.en || ''
+}
+
 // Filter Logic based on search query
 const filteredCourses = computed(() => {
   if (!searchQuery.value) return courses.value;
   const query = searchQuery.value.toLowerCase();
   return courses.value.filter(
-    (c) =>
-      c.title.toLowerCase().includes(query) ||
-      c.description?.toLowerCase().includes(query)
+    (c) => {
+      const title = getLocalizedText(c.title).toLowerCase();
+      const desc = getLocalizedText(c.description).toLowerCase();
+      return title.includes(query) || (desc && desc.includes(query));
+    }
   );
 });
 </script>
@@ -318,13 +327,13 @@ const filteredCourses = computed(() => {
           </div>
 
           <h1 class="text-[32px] font-bold mb-4 text-slate-900 dark:text-white">
-            {{ selectedCourse.title }}
+            {{ getLocalizedText(selectedCourse.title) }}
           </h1>
           <p
             class="text-slate-700 dark:text-slate-400 mb-6"
             style="font-size: 1.1em; line-height: 1.7"
           >
-            {{ selectedCourse.description }}
+            {{ getLocalizedText(selectedCourse.description) }}
           </p>
 
           <!-- Learning Objectives -->