faq sectin connected to backedn

components/FAQ.tsx

@@ -1,24 +1,25 @@
 "use client";
 
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { motion, AnimatePresence } from "framer-motion";
 import { ChevronDown } from "lucide-react";
 import { useLanguage } from "@/context/language-context";
+import { getAllFaq } from "@/lib/api";
 
 interface FaqItem {
   questionKey: string;
   answerKey: string;
 }
 
-interface FaqProps {
-  items?: FaqItem[];
+export interface FaqBackendItem {
+  id: number;
+  question_ru: string;
+  question_uz: string;
+  answer_ru: string;
+  answer_uz: string;
 }
 
-export function FAQ({ items }: FaqProps) {
-  const {t} = useLanguage();
-  const [openIndex, setOpenIndex] = useState<number | null>(0);
-
-  const defaultItems: FaqItem[] = [
+const defaultItems: FaqItem[] = [
   {
     questionKey: "faq.items.0.question",
     answerKey: "faq.items.0.answer",
@@ -31,9 +32,24 @@ export function FAQ({ items }: FaqProps) {
     questionKey: "faq.items.2.question",
     answerKey: "faq.items.2.answer",
   },
-  ];
+];
 
-  const faqItems = items || defaultItems;
+export function FAQ() {
+  const { t, language } = useLanguage();
+  const [openIndex, setOpenIndex] = useState<number | null>(0);
+  const [faqItems, setFaqItems] = useState<FaqItem[]>([]);
+
+  useEffect(() => {
+    async function fetchFaq() {
+      const allFaq = await getAllFaq();
+      const faqItems: FaqItem[] = allFaq.map((item) => ({
+        questionKey: language === "uz" ? item.question_uz : item.question_ru,
+        answerKey: language === "uz" ? item.answer_uz : item.answer_ru,
+      }));
+      faqItems.length === 0 ? setFaqItems(defaultItems) : setFaqItems(faqItems);
+    }
+    fetchFaq();
+  }, [language]);
 
   const containerVariants = {
     hidden: { opacity: 0 },
@@ -81,7 +97,7 @@ export function FAQ({ items }: FaqProps) {
               >
                 <div className="flex items-center justify-between">
                   <h3 className="text-lg font-semibold text-gray-900 flex-1">
-                    {t.faq.items[idx].question}
+                    {item.questionKey}
                   </h3>
                   <motion.div
                     animate={{ rotate: openIndex === idx ? 180 : 0 }}
@@ -104,7 +120,7 @@ export function FAQ({ items }: FaqProps) {
                   >
                     <div className="bg-primary/20 p-6 rounded-b-lg border-t border-gray-200">
                       <p className="text-gray-700 leading-relaxed">
-                        {t.faq.items[idx].answer}
+                        {item.answerKey}
                       </p>
                     </div>
                   </motion.div>

lib/api.ts

@@ -1,3 +1,4 @@
+import { FaqBackendItem } from "@/components/FAQ";
 import { Product } from "@/lib/products";
 
 export async function getAllProducts(): Promise<Product[]> {
@@ -12,3 +13,14 @@ export async function getAllProducts(): Promise<Product[]> {
 
   return res.json();
 }
+
+export async function getAllFaq(): Promise<FaqBackendItem[]> {
+  const res = await fetch("https://admin.promtechno.uz/api/faqs/");
+
+  if (!res.ok) {
+    console.log("Failed to fetch faqs");
+    return [];
+  }
+
+  return res.json();
+}