story-generator/src/components/ui/faq.tsx

import React from 'react';

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

interface FAQProps {
  title?: string;
  description?: string;
  items: FAQItem[];
  className?: string;
}

export function FAQ({
  title = "Perguntas Frequentes",
  description = "Tire suas dúvidas sobre nossa plataforma",
  items,
  className = ""
}: FAQProps) {
  return (
    <section className={`px-4 py-24 bg-white ${className}`}>
      <div className="mx-auto max-w-3xl">
        <h2 className="text-4xl font-bold text-center text-gray-900 mb-16">
          {title}
        </h2>
        
        {description && (
          <p className="text-center text-gray-600 mb-12">
            {description}
          </p>
        )}

        <div className="space-y-8">
          {items.map((item, index) => (
            <div key={index} className="bg-gray-50 rounded-xl p-6 hover:bg-gray-100 transition-colors">
              <h3 className="text-xl font-bold text-gray-900 mb-2">
                {item.question}
              </h3>
              <p className="text-gray-600">
                {item.answer}
              </p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}