Company autocomplete

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 BrandAutocomplete() {
  const [query, setQuery] = useState("");
  const [results, setResults] = useState<BrandResult[]>([]);
  const [loading, setLoading] = useState(false);
  const [selected, setSelected] = useState<BrandResult | null>(null);
  const [open, setOpen] = useState(false);
  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, 5) : []);
          setLoading(false);
        }
      } catch {
        if (reqId.current === id) {
          setResults([]);
          setLoading(false);
        }
      }
    }, 250);
    return () => clearTimeout(t);
  }, [query]);

  return (
    <div className="w-full max-w-[340px]">
      <style>{`@keyframes bf-fade-in { from { opacity: 0; transform: translateY(-2px); } to { opacity: 1; transform: none; } }`}</style>
      <div className="relative">
        <svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" className="absolute left-3 top-1/2 -mt-[7.5px] opacity-40">
          <circle cx="11" cy="11" r="7" />
          <path d="m21 21-4.3-4.3" />
        </svg>
        <input
          className="box-border w-full rounded-lg border border-[#63636333] bg-transparent py-[9px] pl-9 pr-3 text-sm text-inherit outline-none focus:border-[#0084FF] focus:shadow-[0_0_0_3px_#0084ff26]"
          placeholder="Search any brand..."
          value={query}
          onFocus={() => setOpen(true)}
          onChange={(e: ChangeEvent<HTMLInputElement>) => {
            setQuery(e.target.value);
            setSelected(null);
            setOpen(true);
          }}
        />
      </div>

      {open && query.trim() && !selected && (
        <div className="mt-2 animate-[bf-fade-in_150ms_ease_both] overflow-hidden rounded-xl border border-[#63636326] bg-white shadow-sm dark:bg-[#1c1d1f]">
          {results.length === 0 ? (
            <div className="px-3.5 py-3 text-[13px] text-[#9ca3af]">
              {loading ? "Searching…" : `No brands found for “${query.trim()}”`}
            </div>
          ) : (
            results.map((r) => (
              <button
                key={r.brandId}
                onClick={() => {
                  setSelected(r);
                  setQuery(r.name || r.domain);
                  setOpen(false);
                }}
                className="flex w-full cursor-pointer items-center gap-2.5 border-0 bg-transparent px-3 py-2 text-left transition-colors duration-100 hover:bg-[#6363631f]"
              >
                <img src={r.icon} alt={`${r.name || r.domain} logo`} className="h-7 w-7 shrink-0 rounded-md" />
                <span className="min-w-0">
                  <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>
              </button>
            ))
          )}
        </div>
      )}

      {selected && (
        <div className="mt-2 flex animate-[bf-fade-in_150ms_ease_both] items-center gap-3 rounded-xl border border-[#63636326] bg-white p-3 dark:bg-[#1c1d1f]">
          <img src={selected.icon} alt={`${selected.name || selected.domain} logo`} className="h-9 w-9 shrink-0 rounded-lg" />
          <div className="min-w-0">
            <div className="truncate text-sm font-semibold">{selected.name || selected.domain}</div>
            <div className="truncate text-xs text-[#6b7280]">
              {selected.domain} · <span className="font-mono">{selected.brandId}</span>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}