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

interface FaqItem {
  id: string;
  question: string;
  answer: string;
  className?: string;
}

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

const Faq1 = ({
  heading = "پرسش‌های متداول",
  items = [
    {
      id: "faq-1",
      question: "این بخش چه کاربردی دارد؟",
      answer:
        "در این بخش، پاسخ رایج‌ترین پرسش‌های کاربران درباره خدمات، محصولات و نحوه استفاده از سامانه ارائه شده تا بدون نیاز به تماس با پشتیبانی، پاسخ خود را پیدا کنید.",
    },
    {
      id: "faq-2",
      question: "چرا این بخش برای کاربران مفید است؟",
      answer:
        "هدف این بخش کاهش زمان جستجوی اطلاعات، افزایش رضایت کاربران و دسترسی سریع به پاسخ پرسش‌های متداول است.",
    },
    {
      id: "faq-3",
      question: "چگونه یک بخش پرسش‌های متداول مؤثر طراحی کنیم؟",
      answer:
        "پرسش‌های پرتکرار کاربران را جمع‌آوری کنید، برای هرکدام پاسخی دقیق و شفاف بنویسید و آن‌ها را بر اساس موضوع دسته‌بندی کنید.",
    },
    {
      id: "faq-4",
      question: "وجود این بخش چه مزایایی دارد؟",
      answer:
        "این بخش باعث کاهش حجم درخواست‌های پشتیبانی، افزایش سرعت پاسخ‌گویی و بهبود تجربه کاربری می‌شود.",
    },
    {
      id: "faq-5",
      question: "چگونه پرسش‌ها را دسته‌بندی کنیم؟",
      answer:
        "پرسش‌ها را براساس موضوعاتی مانند حساب کاربری، خرید، پرداخت، ارسال، پشتیبانی و تنظیمات گروه‌بندی کنید تا کاربران سریع‌تر پاسخ خود را بیابند.",
    },
    {
      id: "faq-6",
      question: "پاسخ‌ها باید چه میزان جزئیات داشته باشند؟",
      answer:
        "پاسخ‌ها باید کوتاه، دقیق و کاربردی باشند؛ در صورت نیاز می‌توان لینک راهنما یا مستندات تکمیلی را نیز ارائه کرد.",
    },
    {
      id: "faq-7",
      question: "آیا ارجاع به راهنماهای بیشتر مفید است؟",
      answer:
        "بله، لینک به مستندات، آموزش‌ها یا مقالات مرتبط به کاربران کمک می‌کند اطلاعات کامل‌تری دریافت کنند.",
    },
  ],
  className,
}: Faq1Props) => {
  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>
        <Accordion type="single" collapsible className="w-full text-start">
          {items.map((item, index) => (
            <AccordionItem key={index} value={`item-${index}`}>
              <AccordionTrigger className="font-semibold hover:no-underline">
                {item.question}
              </AccordionTrigger>
              <AccordionContent className="text-muted-foreground">
                {item.answer}
              </AccordionContent>
            </AccordionItem>
          ))}
        </Accordion>
      </div>
    </section>
  );
};

export { Faq1 };