import React from 'react';
import { getFAQSchema } from '@/lib/schema';
import JsonLd from '@/components/JsonLd';

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

interface FaqBlockProps {
  title?: string;
  subtitle?: string;
  questions: FAQItem[];
}

export const FaqBlock: React.FC<FaqBlockProps> = ({ 
  title = "Häufig gestellte Fragen", 
  subtitle, 
  questions 
}) => {
  if (!questions || questions.length === 0) return null;

  return (
    <section className="py-16 md:py-24 lg:py-32">
      <div className="max-w-3xl mx-auto">
        <div className="mb-10 text-center">
          {subtitle && (
            <span className="text-sm font-bold text-accent uppercase tracking-wider block mb-2">
              {subtitle}
            </span>
          )}
          <h2 className="text-2xl md:text-4xl font-bold text-text-primary">
            {title}
          </h2>
        </div>
        
        <div className="space-y-4">
          {questions.map((item, index) => (
            <details 
              key={index} 
              className="group border border-neutral-200 bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow"
            >
              <summary className="flex items-center justify-between cursor-pointer p-6 font-semibold text-lg text-text-primary hover:text-primary transition-colors select-none">
                {item.question}
                <span className="ml-4 flex-shrink-0 transition-transform duration-300 group-open:-rotate-180 text-accent">
                  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M5 7.5L10 12.5L15 7.5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                  </svg>
                </span>
              </summary>
              <div className="px-6 pb-6 text-text-secondary leading-relaxed border-t border-neutral-100 pt-4 prose prose-p:my-2 prose-a:text-primary">
                {/* Parse simple HTML or just text if answer has formatting */}
                <div dangerouslySetInnerHTML={{ __html: item.answer }} />
              </div>
            </details>
          ))}
        </div>
      </div>
      
      {/* Inject FAQ Schema automatically */}
      <JsonLd data={getFAQSchema(questions)} />
    </section>
  );
};