import { Badge } from "@/components/ui/badge";
import { cn } from "@/lib/utils";

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

export interface Faq5Props {
  badge?: string;
  heading?: string;
  description?: string;
  faqs?: FaqItem[];
  className?: string;
}

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

const Faq5 = ({
  badge = "پرسش‌های متداول",
  heading = "پاسخ پرسش‌های پرتکرار",
  description = "پاسخ متداول‌ترین پرسش‌های کاربران درباره امکانات، خدمات و نحوه استفاده از پلتفرم را در این بخش مشاهده کنید.",
  faqs = defaultFaqs,
  className,
}: Faq5Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container mx-auto max-w-3xl">
        <div className="text-center">
          <Badge className="text-xs font-medium">{badge}</Badge>
          <h1 className="mt-4 text-xl font-semibold">{heading}</h1>
          <p className="mt-6 font-medium text-muted-foreground">
            {description}
          </p>
        </div>
        <div className="mx-auto mt-14 max-w-xl text-start">
          {faqs.map((faq, index) => (
            <div key={index} className="mb-8 flex gap-4">
              <span className="flex size-6 shrink-0 items-center justify-center rounded-sm bg-secondary font-mono text-xs text-primary">
                {(index + 1).toLocaleString("fa-IR")}
              </span>
              <div>
                <div className="mb-2 flex items-center justify-between">
                  <h3 className="font-medium">{faq.question}</h3>
                </div>
                <p className="text-sm text-muted-foreground">{faq.answer}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export { Faq5 };