import type { FAQBlockValue } from "@/types/wagtail";

export default function FAQ({ value }: { value: FAQBlockValue }) {
  return (
    <section className="mx-auto max-w-4xl px-6 py-24">
      <h2 className="mb-12 text-4xl font-bold text-slate-900">常见问题</h2>
      <div className="space-y-8">
        {value.items?.map((item, index) => (
          <div key={`${item.question}-${index}`}>
            <h3 className="mb-2 text-xl font-semibold text-slate-900">
              {item.question}
            </h3>
            {/* answer 来自 Wagtail RichTextBlock，后端已做 bleach 白名单清洗 */}
            <div
              className="text-slate-600"
              dangerouslySetInnerHTML={{ __html: item.answer }}
            />
          </div>
        ))}
      </div>
    </section>
  );
}