import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Input } from "../../../components/atoms/Input";
import { Icon } from "../../../components/atoms/Icon";
import { cn } from "../../../utils/cn";
export const SearchInput = ({ value, onChange, placeholder = "Search...", className, testId, }) => {
    return (_jsxs("div", { className: cn("relative", className), "data-testid": testId, children: [_jsx(Icon, { size: "md", className: "absolute left-3 top-1/2 -translate-y-1/2 text-neutral-400 dark:text-neutral-500", testId: testId ? `${testId}.icon` : undefined, children: _jsx("svg", { fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" }) }) }), _jsx(Input, { type: "text", value: value, onChange: (e) => onChange(e.target.value), placeholder: placeholder, className: "pl-10", testId: testId ? `${testId}.input` : undefined })] }));
};
export default SearchInput;
