import type { Member } from "../stores/member.ts";

interface MentionDropdownProps {
  query: string;
  members: Member[];
  onSelect: (username: string) => void;
}

export function MentionDropdown({ query, members, onSelect }: MentionDropdownProps) {
  const q = query.toLowerCase();
  const filtered = members
    .filter(
      (m) =>
        m.username.toLowerCase().includes(q) ||
        m.display_name?.toLowerCase().includes(q),
    )
    .slice(0, 6);

  if (filtered.length === 0) return null;

  return (
    <div className="absolute bottom-full left-0 mb-1 z-50 w-64 max-h-48 overflow-y-auto bg-gb-bg-s border border-gb-bg-t shadow-lg">
      <div className="px-2 py-1 text-xs text-gb-fg-s font-mono border-b border-gb-bg-t">
        MENTION
      </div>
      {filtered.map((m) => (
        <button
          key={m.id}
          type="button"
          onClick={() => onSelect(m.username)}
          className="w-full px-2 py-1 text-left text-sm font-mono flex items-center gap-2 hover:bg-gb-orange hover:text-gb-bg transition-colors"
        >
          <span className="text-gb-green">●</span>
          <span className="truncate">{m.display_name || m.username}</span>
          {m.display_name && m.display_name !== m.username && (
            <span className="text-gb-fg-f text-xs">({m.username})</span>
          )}
        </button>
      ))}
    </div>
  );
}