import React, { useRef, useCallback } from 'react';

export default function VerifierSuggestions({ suggestions, isLoading, onSelect, inputRef }) {
  const listRef = useRef(null);

  if (!suggestions.length) return null;

  return (
    <ul className="verifier-suggestions-list" ref={listRef}>
      {isLoading ? (
        <li className="verifier-suggestion-item loading">Loading suggestions...</li>
      ) : (
        suggestions.map(actor => (
          <li key={actor.did} className="verifier-suggestion-item" onClick={() => onSelect(actor.handle)}>
            <img
              src={actor.avatar}
              alt=""
              className="verifier-suggestion-avatar"
              onError={(e) => { e.target.style.display = 'none'; }}
            />
            <div className="verifier-suggestion-text">
              <span className="verifier-suggestion-name">{actor.displayName || actor.handle}</span>
              <span className="verifier-suggestion-handle">@{actor.handle}</span>
            </div>
          </li>
        ))
      )}
    </ul>
  );
}