import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";
import { cn } from "@/lib/utils";

const faqs = [
  {
    question: "این بخش چه کاربردی دارد؟",
    answer:
      "در این بخش پاسخ رایج‌ترین پرسش‌های کاربران درباره خدمات، امکانات و نحوه استفاده از سامانه ارائه شده است.",
  },
  {
    question: "چرا وجود این بخش ضروری است؟",
    answer:
      "کاربران بدون نیاز به ثبت تیکت یا تماس با پشتیبانی می‌توانند پاسخ بسیاری از پرسش‌های خود را در همین بخش پیدا کنند.",
  },
  {
    question: "چگونه یک بخش پرسش‌های متداول مؤثر ایجاد کنیم؟",
    answer:
      "پرسش‌های پرتکرار کاربران را جمع‌آوری کرده و برای هر مورد پاسخی کوتاه، دقیق و کاربردی تهیه کنید.",
  },
  {
    question: "مزیت به‌روزرسانی منظم این بخش چیست؟",
    answer:
      "به‌روزرسانی مداوم این بخش باعث افزایش رضایت کاربران، کاهش درخواست‌های پشتیبانی و دسترسی سریع‌تر به اطلاعات می‌شود.",
  },
  {
    question: "چگونه یک بخش پرسش‌های متداول مؤثر ایجاد کنیم؟",
    answer:
      "پرسش‌های پرتکرار کاربران را جمع‌آوری کرده و برای هر مورد پاسخی کوتاه، دقیق و کاربردی تهیه کنید.",
  },
];

interface Faq9Props {
  className?: string;
}

const Faq9 = ({ className }: Faq9Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container mx-auto max-w-3xl">
        <h2 className="mt-2 mb-12 text-center text-3xl font-bold md:text-2xll">
          پرسش‌های متداول
                          </h2>
        <Accordion type="multiple" className="text-start">
          {faqs.map((faq, index) => (
            <AccordionItem
              key={index}
              value={`item-${index}`}
              className="mb-2 rounded-md border-b-0 bg-muted px-5 py-2 md:mb-4"
            >
              <AccordionTrigger className="text-start">
                {faq.question}
              </AccordionTrigger>
              <AccordionContent>{faq.answer}</AccordionContent>
            </AccordionItem>
          ))}
        </Accordion>
      </div>
    </section>
  );
};

export { Faq9 };