import { getTranslations } from "next-intl/server";
import { FAQItem } from "@/components/ui/faq-item";
import type { FAQSectionProps } from "@/data/faq";

export async function FAQSection({ title, subtitle, faqs }: FAQSectionProps) {
  const t = await getTranslations("faq");
  const displayTitle = title ?? t("title");

  // Early return if no FAQs
  if (!faqs?.length) {
    return null;
  }

  return (
    <section className="py-12 sm:py-24 md:py-32">
      <div className="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8">
        <div className="grid grid-cols-1 gap-4 md:grid-cols-2 md:gap-6">
          {/* Title Section */}
          <div>
            <h2 className="text-center font-bold text-2xl text-white tracking-tight sm:text-3xl md:text-left md:text-4xl lg:text-5xl">
              {displayTitle}
            </h2>
            {subtitle && (
              <p className="mt-4 text-center text-lg text-neutral-400 md:text-left">
                {subtitle}
              </p>
            )}
          </div>

          {/* FAQ Items */}
          <div className="divide-y divide-white/10">
            {faqs.map((faq) => (
              <FAQItem
                answer={faq.answer}
                key={faq.id}
                question={faq.question}
              />
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}