"use client";

import React from 'react';
import sanitizeHtml from 'sanitize-html';
import type { FAQItem } from "@/lib/types";

type Props = { items: FAQItem[]; title?: string };

export function FAQSection({ items, title = "Frequently Asked Questions" }: Props) {
    if (!items?.length) return null;

    return (
        <section className="rounded-xl border border-gray-100 bg-gray-50/50 p-6 my-8">
            <h2 className="text-xl font-bold text-gray-900 mb-6">{title}</h2>
            <div className="space-y-4">
                {items.map((f) => {
                    const cleanAnswer = sanitizeHtml(f.answer, {
                        allowedTags: ['p', 'strong', 'em', 'ul', 'ol', 'li', 'a', 'br', 'code'],
                        allowedAttributes: { 'a': ['href'] }
                    });

                    return (
                        <details key={f.question} className="group rounded-lg border border-gray-200 bg-white p-4 open:shadow-sm open:border-blue-200 transition-all">
                            <summary className="cursor-pointer font-semibold text-gray-800 flex justify-between items-center group-open:text-blue-700">
                                {f.question}
                                <span className="text-gray-400 group-open:rotate-180 transition-transform">▼</span>
                            </summary>
                            <div className="prose max-w-none mt-3 text-gray-600 border-t border-gray-100 pt-3" dangerouslySetInnerHTML={{ __html: cleanAnswer }} />
                        </details>
                    );
                })}
            </div>
        </section>
    );
}
