reui-blocks/blocks/faq2.tsx

import { cn } from "@/lib/utils";

interface FaqItem {
  question: string;
  answer: string;
}

interface Faq2Props {
  heading?: string;
  items?: FaqItem[];
  className?: string;
}

const Faq2 = ({
  heading = "پرسش‌های متداول",
  items = [
    {
      question: "این بخش چه کاربردی دارد؟",
      answer:
        "در این بخش، پاسخ رایج‌ترین پرسش‌های کاربران درباره خدمات، محصولات و نحوه استفاده از سامانه ارائه شده تا بدون نیاز به تماس با پشتیبانی، پاسخ خود را پیدا کنید.",
    },
    {
      question: "چرا این بخش برای کاربران مفید است؟",
      answer:
        "هدف این بخش کاهش زمان جستجوی اطلاعات، افزایش رضایت کاربران و دسترسی سریع به پاسخ پرسش‌های متداول است.",
    },
    {
      question: "چگونه یک بخش پرسش‌های متداول مؤثر طراحی کنیم؟",
      answer:
        "پرسش‌های پرتکرار کاربران را جمع‌آوری کنید، برای هرکدام پاسخی دقیق و شفاف بنویسید و آن‌ها را بر اساس موضوع دسته‌بندی کنید.",
    },
    {
      question: "وجود این بخش چه مزایایی دارد؟",
      answer:
        "این بخش باعث کاهش حجم درخواست‌های پشتیبانی، افزایش سرعت پاسخ‌گویی و بهبود تجربه کاربری می‌شود.",
    },
    {
      question: "چگونه پرسش‌ها را دسته‌بندی کنیم؟",
      answer:
        "پرسش‌ها را براساس موضوعاتی مانند حساب کاربری، خرید، پرداخت، ارسال، پشتیبانی و تنظیمات گروه‌بندی کنید تا کاربران سریع‌تر پاسخ خود را بیابند.",
    },
    {
      question: "پاسخ‌ها باید چه میزان جزئیات داشته باشند؟",
      answer:
        "پاسخ‌ها باید کوتاه، دقیق و کاربردی باشند؛ در صورت نیاز می‌توان لینک راهنما یا مستندات تکمیلی را نیز ارائه کرد.",
    },
    {
      question: "آیا ارجاع به راهنماهای بیشتر مفید است؟",
      answer:
        "بله، لینک به مستندات، آموزش‌ها یا مقالات مرتبط به کاربران کمک می‌کند اطلاعات کامل‌تری دریافت کنند.",
    },
  ],
  className,
}: Faq2Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container mx-auto max-w-3xl">
        <h1 className="mb-4 text-center text-3xl font-semibold md:mb-11 md:text-xl">
          {heading}
        </h1>
        <div className="space-y-8 text-start">
          {items.map((item, index) => (
            <div key={index} className="border-b pb-6">
              <h3 className="mb-2 font-semibold">{item.question}</h3>
              <p className="text-muted-foreground">{item.answer}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export { Faq2 };