import { useState } from "react";
import { faqItems } from "../content";

export function Faq() {
  const [openIds, setOpenIds] = useState<string[]>([]);

  const toggle = (id: string) =>
    setOpenIds((current) =>
      current.includes(id)
        ? current.filter((openId) => openId !== id)
        : [...current, id],
    );

  return (
    <section
      className="section faq"
      id="faq"
      tabIndex={-1}
      aria-labelledby="faq-title"
    >
      <div className="section__head">
        <p className="eyebrow">Questions</p>
        <h2 id="faq-title">Good to know</h2>
      </div>

      <ul className="faq__list">
        {faqItems.map((item) => {
          const isOpen = openIds.includes(item.id);
          return (
            <li key={item.id} className={`faq-item${isOpen ? " is-open" : ""}`}>
              <h3>
                <button
                  type="button"
                  className="faq-item__trigger"
                  aria-expanded={isOpen}
                  aria-controls={`${item.id}-panel`}
                  id={`${item.id}-trigger`}
                  onClick={() => toggle(item.id)}
                >
                  <span>{item.question}</span>
                  <span className="faq-item__icon" aria-hidden="true">
                    <svg width="18" height="18" viewBox="0 0 18 18" focusable="false">
                      <path
                        d="M3.5 9h11"
                        fill="none"
                        stroke="currentColor"
                        strokeWidth="1.5"
                        strokeLinecap="round"
                      />
                      <path
                        className="faq-item__icon-bar"
                        d="M9 3.5v11"
                        fill="none"
                        stroke="currentColor"
                        strokeWidth="1.5"
                        strokeLinecap="round"
                      />
                    </svg>
                  </span>
                </button>
              </h3>
              <div
                className="faq-item__panel"
                id={`${item.id}-panel`}
                role="region"
                aria-labelledby={`${item.id}-trigger`}
                hidden={!isOpen}
              >
                <p>{item.answer}</p>
              </div>
            </li>
          );
        })}
      </ul>
    </section>
  );
}