// ─────── WHICH-KEY popup ───────

function WhichKey({ onClose, deps }) {
  const groups = (deps && deps.keymap.groups) || PortfolioCore.keymap.groups;

  React.useEffect(() => {
    const h = (e) => {
      if (e.key === 'Escape' || e.key === '?') {
        e.preventDefault();
        onClose();
      }
    };
    window.addEventListener('keydown', h);
    return () => window.removeEventListener('keydown', h);
  }, [onClose]);

  return (
    <>
      <div className="whichkey-backdrop" onClick={onClose} />
      <div className="whichkey" role="dialog">
        <div className="whichkey-header">
          <span>
            which-key — <span className="k">&lt;leader&gt;</span> help
          </span>
          <span>
            press <kbd>?</kbd> or <kbd>esc</kbd> to close
          </span>
        </div>
        <div className="whichkey-body">
          {groups.map((g, gi) => (
            <div key={gi} style={{ marginBottom: 14 }}>
              <div className="wk-group-title">
                ── {g.group} ──
              </div>
              <div className="whichkey-grid">
                {g.items.map((it, i) => (
                  <div key={i} className="wk-item">
                    <kbd className="key">{it.key}</kbd>
                    <span className="arrow">→</span>
                    <span className="action">{it.action}</span>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
        <div className="wk-footer">
          tip: new to vim? click things. use <kbd>h/j/k/l</kbd> to move cursor. everything else
          optional.
        </div>
      </div>
    </>
  );
}

window.WhichKey = WhichKey;