const { useState, useEffect, useRef } = React;
/* ---------- Tabs / chips ---------- */
function Tabs({ tabs, active, onChange }) {
  return (
    <div className="tabs" role="tablist">
      {tabs.map((t) => (
        <button key={t.id} role="tab" className={"tab" + (active === t.id ? " on" : "")} onClick={() => onChange(t.id)}>
          {t.label}{t.count != null ? <span className="tab-n">{t.count}</span> : null}
        </button>
      ))}
    </div>
  );
}
function Chips({ options, active, onChange }) {
  return (
    <div className="chips">
      {options.map((o) => (
        <button key={o.id} className={"chip" + (active === o.id ? " on" : "")} onClick={() => onChange(o.id)}>
          {o.label}{o.count != null ? <span className="chip-n">{o.count}</span> : null}
        </button>
      ))}
    </div>
  );
}


Object.assign(window, { Tabs, Chips });