Logo picker

import { useState, useEffect, useRef, type ChangeEvent } from "react";

const CLIENT_ID = "YOUR_CLIENT_ID"; // free client ID from developers.brandfetch.com/register

type BrandResult = { brandId: string; name: string; domain: string; icon: string };

export function LogoPicker() {
  const [query, setQuery] = useState("");
  const [results, setResults] = useState<BrandResult[]>([]);
  const [loading, setLoading] = useState(false);
  const [picked, setPicked] = useState<BrandResult | null>(null);
  const reqId = useRef(0);

  useEffect(() => {
    const q = query.trim();
    if (!q) {
      setResults([]);
      setLoading(false);
      return;
    }
    setLoading(true);
    const id = ++reqId.current;
    const t = setTimeout(async () => {
      try {
        const res = await fetch(`https://api.brandfetch.io/v2/search/${encodeURIComponent(q)}?c=${CLIENT_ID}`);
        const data = await res.json();
        if (reqId.current === id) {
          setResults(Array.isArray(data) ? data.slice(0, 4) : []);
          setLoading(false);
        }
      } catch {
        if (reqId.current === id) {
          setResults([]);
          setLoading(false);
        }
      }
    }, 250);
    return () => clearTimeout(t);
  }, [query]);

  return (
    <div className="w-full max-w-[360px] overflow-hidden rounded-xl border border-[#63636333] bg-white dark:bg-[#1c1d1f]">
      <div className="border-b border-[#63636326] px-4 py-3 text-sm font-semibold">Insert brand logo</div>
      <div className="p-4">
        <input
          className="box-border w-full rounded-lg border border-[#63636333] bg-transparent px-3 py-2 text-sm text-inherit outline-none focus:border-[#0084FF] focus:shadow-[0_0_0_3px_#0084ff26]"
          placeholder="Search brands..."
          value={query}
          onChange={(e: ChangeEvent<HTMLInputElement>) => {
            setQuery(e.target.value);
            setPicked(null);
          }}
        />
        <div className="mt-3 flex min-h-[196px] flex-col gap-1.5">
          {results.map((r) => {
            const isPicked = picked?.brandId === r.brandId;
            return (
              <button
                key={r.brandId}
                onClick={() => setPicked(r)}
                className={`flex w-full cursor-pointer items-center gap-2.5 rounded-lg border bg-transparent px-3 py-2 text-left transition-colors duration-100 hover:bg-[#63636314] ${
                  isPicked ? "border-[#0084FF]" : "border-[#63636326]"
                }`}
              >
                <img src={r.icon} alt={`${r.name || r.domain} logo`} className="h-8 w-8 shrink-0 rounded-md" />
                <span className="min-w-0 flex-1">
                  <span className="block truncate text-sm font-medium text-inherit">{r.name || r.domain}</span>
                  <span className="block truncate text-xs text-[#6b7280]">{r.domain}</span>
                </span>
                {isPicked && (
                  <svg viewBox="0 0 24 24" width="16" height="16" className="shrink-0">
                    <circle cx="12" cy="12" r="11" fill="#0084FF" />
                    <path d="m7.5 12 3 3 6-6" fill="none" stroke="white" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" />
                  </svg>
                )}
              </button>
            );
          })}
          {results.length === 0 && (
            <div className="flex flex-1 items-center justify-center text-[13px] text-[#9ca3af]">
              {loading ? "Searching…" : query.trim() ? `No brands found for “${query.trim()}”` : "Search for a brand to see its logo"}
            </div>
          )}
        </div>
        <button
          className="mt-3 w-full rounded-lg border-0 py-2 text-sm font-medium text-white transition-colors"
          style={{ background: picked ? "#0084FF" : "#9ca3af", cursor: picked ? "pointer" : "default" }}
        >
          {picked ? `Insert ${picked.name || picked.domain} logo` : "Select a logo"}
        </button>
      </div>
    </div>
  );
}