mintel.me/apps/web/src/components/FAQSection.tsx

"use client";

import React from "react";
import { H3 } from "./ArticleHeading";
import { Paragraph } from "./ArticleParagraph";

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

interface FAQSectionProps {
    children?: React.ReactNode;
}

/**
 * FAQSection: A simple semantic wrapper for FAQs in blog posts.
 * It can be used by the AI to wrap a list of questions and answers.
 */
export const FAQSection: React.FC<FAQSectionProps> = ({ children }) => {
    return (
        <div className="my-16 border-t border-slate-100 pt-12">
            <H3 id="faq">Häufig gestellte Fragen (FAQ)</H3>
            <div className="mt-8 space-y-8">
                {children}
            </div>
        </div>
    );
};