import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { forwardRef } from "react";
import { Search, X, Loader2 } from "lucide-react";
import { Input } from "./ui/input";
import { cn } from "../lib/utils";
export const FilterInput = forwardRef(({ value, onChange, placeholder = "Filter...", className, showSearchIcon = true, showClearIcon = true, disabled = false, autoFocus = false, loading = false, size = "sm", spinnerStyle, onClear, }, ref) => {
    const handleClear = () => {
        onChange("");
        if (onClear) {
            onClear();
        }
    };
    return (_jsxs("div", { className: cn("relative flex items-center", className), children: [_jsx(Input, { ref: ref, type: "text", value: value, onChange: (e) => onChange(e.target.value), className: cn("pr-8 text-xs", size === "sm" && "h-7", size === "md" && "h-8", size === "lg" && "h-9", size === "xs" && "h-6"), placeholder: placeholder, disabled: disabled, autoFocus: autoFocus }), loading && (_jsx(Loader2, { className: "text-neutral-grey-50 absolute right-2 h-4 w-4 animate-spin", style: spinnerStyle })), !loading && !value && showSearchIcon && (_jsx(Search, { className: "text-neutral-grey-50 absolute right-2 h-4 w-4" })), !loading && value && showClearIcon && (_jsx(X, { className: "text-neutral-grey-50 hover:text-neutral-grey-50 absolute right-2 h-4 w-4 cursor-pointer", onClick: handleClear }))] }));
});
FilterInput.displayName = "FilterInput";
/**
 * Utility function to highlight matching text in search results
 * @param text - The text to highlight
 * @param filter - The filter string to match
 * @returns JSX elements with highlighted matches
 */
export const highlightMatch = (text, filter) => {
    if (!filter.trim())
        return text;
    return text
        .split(new RegExp(`(${filter})`, "i"))
        .map((part, i) => part.toLowerCase() === filter.toLowerCase() && part ? (_jsx("u", { className: "font-bold", children: part }, i)) : (part && _jsx("span", { children: part }, i)));
};
//# sourceMappingURL=FilterInput.js.map