import { Avatar } from "./Avatar";

export interface PlayerSuggestion {
  user_id: number;
  nickname: string;
  avatar_url?: string | null;
}

/**
 * Выпадающие подсказки ников под инпутом. Родитель оборачивает инпут в
 * .suggest-wrap, управляет видимостью и решает, что делать по выбору
 * (подставить ник, перейти в профиль и т.п.).
 */
export function PlayerSuggestions({
  items,
  onPick,
}: {
  items: PlayerSuggestion[];
  onPick: (item: PlayerSuggestion) => void;
}) {
  if (items.length === 0) return null;
  return (
    <div className="suggest-list" role="listbox">
      {items.map((u) => (
        <button
          key={u.user_id}
          type="button"
          className="suggest-row"
          role="option"
          // mousedown, а не click: mousedown срабатывает ДО blur инпута — иначе
          // onBlur родителя скрыл бы список раньше клика. preventDefault
          // оставляет фокус в инпуте.
          onMouseDown={(e) => {
            e.preventDefault();
            onPick(u);
          }}
        >
          <Avatar url={u.avatar_url} nickname={u.nickname} size={28} />
          <span className="nick">{u.nickname}</span>
        </button>
      ))}
    </div>
  );
}