/* global React */
const { useState: useStateFaq } = React;

function FaqItem({ q, a }) {
  const [open, setOpen] = useStateFaq(false);
  return (
    <div className={`cs-faq-item${open ? ' is-open' : ''}`}>
      <button className="cs-faq-q" onClick={() => setOpen(!open)}>
        <span>{q}</span>
        <span className="cs-faq-toggle">{open ? '−' : '+'}</span>
      </button>
      {open && (
        <div className="cs-faq-a"><p>{a}</p></div>
      )}
    </div>
  );
}

function Faq({ heading = 'Veelgestelde', italic = 'vragen', items = [] }) {
  return (
    <section className="cs-faq">
      <div className="cs-faq-inner">
        <h2>{heading} {italic && <em>{italic}</em>}</h2>
        <div className="cs-faq-list">
          {items.map((it, i) => <FaqItem key={i} {...it}/>)}
        </div>
      </div>
    </section>
  );
}

window.Faq = Faq;
window.FaqItem = FaqItem;