/* global React */
// Jaettu accordion-komponentti FAQ-sivulle ja etusivun FAQ-osiolle.
// allowMultiple=false (etusivu): vain yksi kysymys auki kerrallaan.
// allowMultiple=true (/faq): useampi voi olla auki samaan aikaan.
// Ensimmäinen kysymys on auki oletuksena.
function FaqAccordion({ items, allowMultiple = false, className = "" }) {
  const [openIds, setOpenIds] = React.useState(() => new Set(items.length ? [items[0].id] : []));

  React.useEffect(() => { if (window.lucide) lucide.createIcons(); }, [openIds]);

  const toggle = (id) => {
    setOpenIds((prev) => {
      const isOpen = prev.has(id);
      if (allowMultiple) {
        const next = new Set(prev);
        if (isOpen) next.delete(id); else next.add(id);
        return next;
      }
      return isOpen ? new Set() : new Set([id]);
    });
  };

  return (
    <div className={"faq-list" + (className ? " " + className : "")}>
      {items.map((it) => {
        const open = openIds.has(it.id);
        const btnId = "faq-btn-" + it.id;
        const panelId = "faq-panel-" + it.id;
        return (
          <div key={it.id} className={"faq-item" + (open ? " is-open" : "")}>
            <button type="button" id={btnId} className="faq-item__q" aria-expanded={open} aria-controls={panelId} onClick={() => toggle(it.id)}>
              <span>{it.q}</span>
              <span className="faq-item__chev"><i data-lucide="chevron-down"></i></span>
            </button>
            {open && (
              <div id={panelId} role="region" aria-labelledby={btnId} className="faq-item__a">
                {it.a.map((p, i) => <p key={i}>{p}</p>)}
              </div>
            )}
          </div>
        );
      })}
    </div>
  );
}

window.FaqAccordion = FaqAccordion;