reui-blocks/blocks/faq20.tsx

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

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

interface Category {
  title: string;
  questions: Question[];
}

interface Faq20Props {
  heading?: string;
  description?: string;
  contactLinkText?: string;
  contactLinkHref?: string;
  categories?: Category[];
  className?: string;
}

const Faq20 = ({
  heading = "پاسخ پرسش خود را پیدا نکردید؟",
  description = "اگر پاسخ پرسش خود را پیدا نکردید،",
  contactLinkText = "با ما تماس بگیرید",
  contactLinkHref = "/contact",
  categories = [
    {
      title: "پشتیبانی",
      questions: [
        {
          question: "چطور تنظیمات حساب کاربری‌ام را به‌روز کنم؟",
          answer:
            "می‌توانید از صفحه تنظیمات در داشبورد، پروفایل، ترجیحات اعلان و تنظیمات امنیتی را تغییر دهید.",
        },
        {
          question: "آیا پشتیبانی در همه طرح‌ها گنجانده شده است؟",
          answer:
            "بله، همه طرح‌ها شامل دسترسی به تیم پشتیبانی هستند. طرح‌های پریمیوم شامل پشتیبانی اولویت‌دار با زمان پاسخ‌گویی سریع‌تر و مدیر حساب اختصاصی است.",
        },
        {
          question: "ساعات پاسخ‌گویی پشتیبانی چگونه است؟",
          answer:
            "تیم پشتیبانی در ساعات کاری پاسخ‌گو است و مشتریان سازمانی بر اساس سطح خدمات، امکان دریافت پشتیبانی ویژه را نیز دارند.",
        },
      ],
    },
    {
      title: "حساب کاربری",
      questions: [
        {
          question: "چطور رمز عبورم را بازنشانی کنم؟",
          answer:
            "روی لینک «فراموشی رمز عبور» در صفحه ورود کلیک کنید و ایمیل خود را وارد کنید. ظرف چند دقیقه لینک بازنشانی دریافت می‌کنید.",
        },
        {
          question: "آیا می‌توانم آدرس ایمیلم را تغییر دهم؟",
          answer:
            "بله، از تنظیمات حساب می‌توانید ایمیل را تغییر دهید. قبل از اعمال تغییر باید ایمیل جدید را تأیید کنید.",
        },
      ],
    },
    {
      title: "سایر پرسش‌ها",
      questions: [
        {
          question: "آیا بازپرداخت ارائه می‌دهید؟",
          answer:
            "ما ۳۰ روز ضمانت بازگشت وجه برای همه طرح‌ها داریم. اگر راضی نیستید، با تیم پشتیبانی تماس بگیرید.",
        },
        {
          question: "آیا می‌توانم طرح خود را ارتقا یا تنزل دهم؟",
          answer:
            "بله، هر زمان می‌توانید طرح را تغییر دهید. ارتقا فوراً اعمال می‌شود و تنزل از دوره صورتحساب بعدی.",
        },
      ],
    },
  ],
  className,
}: Faq20Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-28 lg:py-32", className)}>
      <div className="container mx-auto max-w-5xl">
        <div className="grid gap-16 lg:grid-cols-2">
          <div className="space-y-4 text-start">
            <h2 className="text-xl tracking-tight md:text-xl lg:text-2xll">
              {heading}
            </h2>
            <p className="max-w-md leading-snug text-muted-foreground">
              {description}{" "}
              <a
                href={contactLinkHref}
                className="underline underline-offset-4"
              >
                {contactLinkText}
              </a>
              .
            </p>
          </div>

          <div className="grid gap-6 text-start">
            {categories.map((category, categoryIndex) => (
              <div key={category.title}>
                <h3 className="border-b py-4 text-muted-foreground">
                  {category.title}
                </h3>
                <Accordion type="single" collapsible className="w-full">
                  {category.questions.map((item, i) => (
                    <AccordionItem key={i} value={`${categoryIndex}-${i}`}>
                      <AccordionTrigger className="text-start">
                        {item.question}
                      </AccordionTrigger>
                      <AccordionContent className="text-muted-foreground">
                        {item.answer}
                      </AccordionContent>
                    </AccordionItem>
                  ))}
                </Accordion>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

export { Faq20 };