From 8c5499dac199db80024d5c5b1ca6c938ec28f238 Mon Sep 17 00:00:00 2001
From: "nabijonovdavronbek619@gmail.com" <nabijonovdavronbek619@gmail.com>
Date: Wed, 14 Jan 2026 19:24:19 +0500
Subject: [PATCH] faq sectin connected to backedn

---
 components/FAQ.tsx | 62 +++++++++++++++++++++++++++++-----------------
 lib/api.ts         | 12 +++++++++
 2 files changed, 51 insertions(+), 23 deletions(-)

diff --git a/components/FAQ.tsx b/components/FAQ.tsx
index da1a65b..6ce1728 100644
--- a/components/FAQ.tsx
+++ b/components/FAQ.tsx
@@ -1,39 +1,55 @@
 "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 defaultItems: FaqItem[] = [
+  {
+    questionKey: "faq.items.0.question",
+    answerKey: "faq.items.0.answer",
+  },
+  {
+    questionKey: "faq.items.1.question",
+    answerKey: "faq.items.1.answer",
+  },
+  {
+    questionKey: "faq.items.2.question",
+    answerKey: "faq.items.2.answer",
+  },
+];
+
+export function FAQ() {
+  const { t, language } = useLanguage();
   const [openIndex, setOpenIndex] = useState<number | null>(0);
+  const [faqItems, setFaqItems] = useState<FaqItem[]>([]);
 
-  const defaultItems: FaqItem[] = [
-    {
-      questionKey: "faq.items.0.question",
-      answerKey: "faq.items.0.answer",
-    },
-    {
-      questionKey: "faq.items.1.question",
-      answerKey: "faq.items.1.answer",
-    },
-    {
-      questionKey: "faq.items.2.question",
-      answerKey: "faq.items.2.answer",
-    },
-  ];
-
-  const faqItems = items || defaultItems;
+  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>
diff --git a/lib/api.ts b/lib/api.ts
index a2a7829..d1252ba 100644
--- a/lib/api.ts
+++ b/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();
+}