"use client";

import * as React from "react";

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

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

interface Faq16Props {
  className?: string;
}

const Faq16 = ({ className }: Faq16Props) => {
  return (
    <section
      dir="rtl"
      lang="fa"
      className={cn("bg-background py-32", className)}
    >
      <div className="container mx-auto max-w-3xl">
        <h1 className="mb-10 text-center text-2xll font-bold tracking-tighter text-foreground">
          پرسش‌های متداول
                          </h1>
        <div className="z-20 mx-auto max-w-2xl rounded-2xl border border-border bg-background p-3">
          <Accordion
            type="single"
            collapsible
            className="flex w-full flex-col items-center justify-center gap-3 text-start"
          >
            {FAQ_QUESTIONS.map((item, index) => (
              <AccordionItem
                value={index.toString()}
                key={index}
                className="m-0 w-full rounded-xl bg-muted px-4 py-2"
              >
                <AccordionTrigger className="flex flex-1 justify-between text-start font-semibold transition-all hover:no-underline">
                  {item.question}
                </AccordionTrigger>
                <AccordionContent className="mt-2 text-muted-foreground">
                  {item.answer}
                </AccordionContent>
              </AccordionItem>
            ))}
          </Accordion>
        </div>
      </div>
    </section>
  );
};

export { Faq16 };