// FAQ accordion
const FAQ = ({ items }) => {
  const [open, setOpen] = React.useState(0);

  return (
    <div className="faq-list">
      {items.map((it, i) => {
        const isOpen = open === i;
        return (
          <div key={i} className={"faq-item" + (isOpen ? " open" : "")}>
            <button className="faq-q" onClick={() => setOpen(isOpen ? -1 : i)}>
              <span>{it.q}</span>
              <span className="toggle"><Icon.Plus size={10}/></span>
            </button>
            <div className="faq-a" style={{ maxHeight: isOpen ? 200 : 0 }}>
              <div className="faq-a-inner">{it.a}</div>
            </div>
          </div>
        );
      })}
    </div>
  );
};

window.FAQ = FAQ;