import React from 'react';
import Accordion from './accordion';

export interface FAQItem {
  question: string;
  answer: React.ReactNode;
}

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

const FAQ: React.FC<FAQProps> = ({ items, title = 'Frequently Asked Questions' }) => {
  if (!items?.length) {
    return (
      <section className="faq">
        <h2 className="faq__title">{title}</h2>
        <p className="faq__empty">No FAQs available.</p>
      </section>
    );
  }

  return (
    <div className="content">
      <div className="content__container content__container--small">
        <section className="faq">
          <h2 className="faq__title">{title}</h2>
          <div className="faq__list">
            {items.map((item, idx) => (
              <Accordion key={item.question ?? idx} summary={item.question}>
                <div className="faq__answer">{item.answer}</div>
              </Accordion>
            ))}
          </div>
        </section>
      </div>
    </div>
  );
};

export default FAQ;