import { useState } from "react";
export function SearchableSelect({ options, value, onChange }) {
const [query, setQuery] = useState("");
const [open, setOpen] = useState(false);
const filtered = options.filter((o) => o.toLowerCase().includes(query.toLowerCase()));
return (
<div className="relative w-64">
<input
value={open ? query : value}
onFocus={() => setOpen(true)}
onChange={(e) => setQuery(e.target.value)}
className="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm"
placeholder="Search…"
/>
{open && (
<ul className="absolute z-10 mt-1 max-h-48 w-full overflow-auto rounded-lg
border border-slate-200 bg-white shadow-lg">
{filtered.map((opt) => (
<li
key={opt}
onClick={() => { onChange(opt); setOpen(false); setQuery(""); }}
className="cursor-pointer px-3 py-2 text-sm hover:bg-indigo-50"
>
{opt}
</li>
))}
</ul>
)}
</div>
);
}