import type { FAQContent } from "@/content/types";
import { RichText } from "./rich-text";

export function FAQ({ items }: { items: readonly FAQContent[] }) {
  return (
    <div className="faq-list">
      {items.map((item, index) => (
        <details name="loan-faq" open={index === 0} key={item.question}>
          <summary>
            {item.question}
            <span aria-hidden="true" className="faq-indicator" />
          </summary>
          <div className="faq-answer rich-text">
            <RichText nodes={item.answer} />
          </div>
        </details>
      ))}
    </div>
  );
}