import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { cn, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, Icon, } from "@powerhousedao/design-system";
import { useMemo } from "react";
import { twMerge } from "tailwind-merge";
import { FilterItem } from "./filter-item.js";
export const ConnectSearchBar = (props) => {
    const { value, onChange, placeholder, filterLabel, filterItems, selectedFilter, onFilterSelect = () => { }, className, } = props;
    const items = useMemo(() => filterItems?.map((item) => ({
        id: item.id,
        content: _jsx(FilterItem, { item: item }),
    })) ?? [], [filterItems]);
    const selectedItemFilter = filterItems?.find((item) => item.id === selectedFilter);
    const filterLabelContent = selectedItemFilter ? (_jsx(FilterItem, { className: "gap-x-1", item: selectedItemFilter })) : (filterLabel && (_jsx("div", { className: "mr-2 text-sm font-semibold text-slate-200", children: filterLabel })));
    function handleChange(event) {
        onChange?.(event.target.value);
    }
    return (_jsxs("div", { className: cn("flex items-center", className), children: [_jsx(Icon, { className: "mr-3", name: "Search" }), _jsx("input", { className: twMerge("flex h-[52px] min-w-0 flex-1 items-center rounded-xl border border-gray-200 bg-gray-50 px-4 text-sm text-slate-200 outline-none"), onChange: handleChange, placeholder: placeholder, value: value }), _jsxs(DropdownMenu, { children: [_jsxs(DropdownMenuTrigger, { className: "ml-3 flex h-full flex-row items-center outline-none", children: [filterLabelContent, " ", _jsx(Icon, { name: "ChevronDown" })] }), _jsx(DropdownMenuContent, { className: "rounded-xl border border-gray-100 bg-gray-50 p-2", children: items.map((item) => (_jsx(DropdownMenuItem, { className: "h-10 cursor-pointer overflow-hidden rounded-lg hover:bg-gray-100", id: item.id, onSelect: () => onFilterSelect(item.id), children: item.content }, item.id))) })] })] }));
};
//# sourceMappingURL=search-bar.js.map