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

interface Question {
  question: string;
  answer: string;
}

interface Category {
  title: string;
  questions: Question[];
}

interface Faq20Props {
  heading?: string;
  description?: string;
  contactLinkText?: string;
  contactLinkHref?: string;
  categories?: Category[];
  className?: string;
}

const Faq20 = ({
  heading = "هنوز سوالی مانده؟",
  description = "اگر پاسخ را در فهرست نیافتید،",
  contactLinkText = "با پشتیبانی گفتگو کنید",
  contactLinkHref = "/contact",
  categories = [
    {
      title: "پشتیبانی",
      questions: [
        {
          question: "چطور تنظیمات فضای کاری را به‌روز کنم؟",
          answer:
            "از تنظیمات داشبورد، پروفایل، اعلان‌ها و امنیت را تغییر دهید؛ تغییرات بلافاصله برای اعضا اعمال می‌شود.",
        },
        {
          question: "پشتیبانی در همه پلن‌ها هست؟",
          answer:
            "بله. همه پلن‌ها به مرکز راهنما و تیکت دسترسی دارند؛ پلن‌های بالاتر پاسخ سریع‌تر و مدیر حساب دارند.",
        },
        {
          question: "ساعات پاسخ‌گویی چگونه است؟",
          answer:
            "در ساعات کاری پاسخ می‌دهیم؛ مشتریان سازمانی مطابق سطح خدمات، کانال ویژه در اختیار دارند.",
        },
      ],
    },
    {
      title: "حساب کاربری",
      questions: [
        {
          question: "چطور رمز عبور را بازنشانی کنم؟",
          answer:
            "در ورود، «فراموشی رمز عبور» را بزنید و ایمیل را وارد کنید؛ لینک بازنشانی ظرف چند دقیقه می‌رسد.",
        },
        {
          question: "آیا می‌توانم ایمیل حساب را عوض کنم؟",
          answer:
            "بله. از تنظیمات حساب ایمیل جدید را ثبت کنید؛ تا تأیید ایمیل جدید، تغییر نهایی نمی‌شود.",
        },
      ],
    },
    {
      title: "صورتحساب",
      questions: [
        {
          question: "ضمانت بازگشت وجه دارید؟",
          answer:
            "تا ۳۰ روز برای پلن‌های مشمول ضمانت، در صورت نارضایتی با پشتیبانی درخواست استرداد ثبت کنید.",
        },
        {
          question: "می‌توانم پلن را ارتقا یا کاهش دهم؟",
          answer:
            "هر زمان. ارتقا فوری است و کاهش از دوره صورتحساب بعدی اعمال می‌شود.",
        },
      ],
    },
  ],
  className,
}: Faq20Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-28 lg:py-32", className)}>
      <div className="container mx-auto max-w-5xl">
        <div className="grid gap-16 lg:grid-cols-2">
          <div className="space-y-4 text-start">
            <h2 className="text-xl tracking-tight md:text-xl lg:text-2xll">
              {heading}
            </h2>
            <p className="max-w-md leading-snug text-muted-foreground">
              {description}{" "}
              <a
                href={contactLinkHref}
                className="underline underline-offset-4"
              >
                {contactLinkText}
              </a>
              .
            </p>
          </div>

          <div className="grid gap-6 text-start">
            {categories.map((category, categoryIndex) => (
              <div key={category.title}>
                <h3 className="border-b py-4 text-muted-foreground">
                  {category.title}
                </h3>
                <Accordion type="single" collapsible className="w-full">
                  {category.questions.map((item, i) => (
                    <AccordionItem key={i} value={`${categoryIndex}-${i}`}>
                      <AccordionTrigger className="text-start">
                        {item.question}
                      </AccordionTrigger>
                      <AccordionContent className="text-muted-foreground">
                        {item.answer}
                      </AccordionContent>
                    </AccordionItem>
                  ))}
                </Accordion>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

export { Faq20 };