import { useState } from "react";
import { faqEntries } from "../data/copy";

export function Faq() {
  const [openIndex, setOpenIndex] = useState<number | null>(null);

  return (
    <section className="faq" id="faq">
      <div className="section-heading">
        <h2>Questions</h2>
      </div>
      <div className="faq__list">
        {faqEntries.map((entry, index) => {
          const isOpen = openIndex === index;
          const panelId = `faq-panel-${index}`;
          const buttonId = `faq-button-${index}`;
          return (
            <div className="faq__item" key={entry.question}>
              <h3 className="faq__question">
                <button
                  type="button"
                  id={buttonId}
                  className="faq__trigger"
                  aria-expanded={isOpen}
                  aria-controls={panelId}
                  onClick={() => setOpenIndex(isOpen ? null : index)}
                >
                  <span>{entry.question}</span>
                  <span className="faq__icon" aria-hidden="true">
                    {isOpen ? "−" : "+"}
                  </span>
                </button>
              </h3>
              <div
                id={panelId}
                role="region"
                aria-labelledby={buttonId}
                className="faq__panel"
                hidden={!isOpen}
              >
                <p>{entry.answer}</p>
              </div>
            </div>
          );
        })}
      </div>
    </section>
  );
}