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

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

interface Faq3Props {
  heading: string;
  description: string;
  items?: FaqItem[];
  supportHeading: string;
  supportDescription: string;
  supportButtonText: string;
  supportButtonUrl: string;
  className?: string;
}

const faqItems = [
  {
    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:
      "بله، لینک به مستندات، آموزش‌ها یا مقالات مرتبط به کاربران کمک می‌کند اطلاعات کامل‌تری دریافت کنند.",
  },
];

const Faq3 = ({
  heading = "پرسش‌های متداول",
  description = "پاسخ پرسش‌های رایج درباره محصولات ما را اینجا بیابید. جوابی پیدا نکردید؟ با تیم پشتیبانی ما تماس بگیرید.",
  items = faqItems,
  className,
}: Faq3Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container mx-auto max-w-3xl space-y-16">
        <div className="flex flex-col text-center">
          <h2 className="mb-3 text-3xl font-semibold md:mb-4 lg:mb-6 lg:text-xl">
            {heading}
          </h2>
          <p className="text-muted-foreground lg:text-lg">{description}</p>
        </div>
        <Accordion
          type="single"
          collapsible
          className="w-full text-start"
        >
          {items.map((item) => (
            <AccordionItem key={item.id} value={item.id}>
              <AccordionTrigger className="transition-opacity duration-200 hover:no-underline hover:opacity-60">
                <div className="font-medium sm:py-1 lg:py-2 lg:text-lg">
                  {item.question}
                </div>
              </AccordionTrigger>
              <AccordionContent className="sm:mb-1 lg:mb-2">
                <div className="text-muted-foreground lg:text-lg">
                  {item.answer}
                </div>
              </AccordionContent>
            </AccordionItem>
          ))}
        </Accordion>
      </div>
    </section>
  );
};

export { Faq3 };