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: "SLA را چطور کنترل می‌کنم؟",
    answer:
      "زمان اولین پاسخ و حل را بر اساس پلن مشتری تعریف کنید؛ هشدار تخطی روی داشبورد و اعلان ظاهر می‌شود.",
  },
  {
    question: "گفتگو از چند کانال جمع می‌شود؟",
    answer:
      "ایمیل، چت وب و پیام‌رسان در یک صندوق دیده می‌شوند تا تاریخچه مشتری پراکنده نماند.",
  },
];

const Faq5 = ({
  badge = "پشتیبانی مشتریان",
  heading = "سوالات رایج درباره میز خدمت",
  description = "مسیریابی تیکت، SLA و کانال‌های پشتیبانی را شفاف ببینید تا تیم خدمات سریع‌تر پاسخ دهد.",
  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 };