"use client";
import { useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import { Plus } from "lucide-react";
export function CompareSearch({ current }: { current: string[] }) {
  const router = useRouter(); const [q, setQ] = useState(""); const [hits, setHits] = useState<{ slug: string; name: string; kind: string }[]>([]);
  useEffect(() => { if (q.length < 2) { setHits([]); return; } const t = setTimeout(() => fetch(`/api/suggest?q=${encodeURIComponent(q)}`).then((r) => r.json()).then((h) => setHits(h.filter((x: any) => x.kind === "tool" && !current.includes(x.slug)))).catch(() => {}), 150); return () => clearTimeout(t); }, [q, current]);
  return (
    <div className="relative">
      <label className="sr-only" htmlFor="cmp-add">Add a tool to compare</label>
      <div className="flex items-center gap-1 rounded-full border border-dashed border-line-2 px-3 py-1"><Plus className="h-3.5 w-3.5 text-fg-3" aria-hidden /><input id="cmp-add" value={q} onChange={(e) => setQ(e.target.value)} placeholder="Add a tool…" className="w-36 bg-transparent text-sm outline-none placeholder:text-fg-3" /></div>
      {hits.length > 0 && <ul role="listbox" className="absolute z-20 mt-1 w-64 rounded-xl border border-line bg-bg-2 p-1 shadow-lift">{hits.map((h) => <li key={h.slug}><button type="button" onClick={() => { router.push(`/compare?tools=${[...current, h.slug].join(",")}`); setQ(""); setHits([]); }} className="w-full rounded-lg px-3 py-1.5 text-left text-sm hover:bg-bg-3">{h.name}</button></li>)}</ul>}
    </div>
  );
}