import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Icon } from "@powerhousedao/design-system";
import React from "react";
import { cn } from "../../../lib/utils.js";
export const SelectedContent = ({ selectedValues, options = [], multiple, searchable, placeholder, handleClear, }) => {
    const renderIcon = (IconComponent) => {
        if (typeof IconComponent === "string") {
            return _jsx(Icon, { name: IconComponent, size: 16 });
        }
        return IconComponent && _jsx(IconComponent, { className: "size-4" });
    };
    if (selectedValues.length === 0) {
        return (_jsxs("div", { className: cn("mx-auto flex w-full items-center", placeholder ? "justify-between" : "justify-end"), children: [placeholder && (_jsx("span", { className: "text-[14px] font-normal leading-5 text-gray-600 dark:text-gray-500", children: placeholder })), searchable ? (_jsx(Icon, { name: "CaretSort", size: 16, className: "cursor-pointer text-gray-700 dark:text-gray-400" })) : (_jsx(Icon, { name: "ChevronDown", size: 16, className: "cursor-pointer text-gray-700 dark:text-gray-400" }))] }));
    }
    return (_jsxs("div", { className: "flex w-full items-center justify-between gap-2", children: [_jsx("div", { className: cn("max-w-full truncate text-gray-900 dark:text-gray-50", !multiple && "flex items-center gap-2"), children: selectedValues.map((value, index) => {
                    const option = options.find((o) => o.value === value);
                    return !multiple ? (_jsxs(React.Fragment, { children: [renderIcon(option?.icon), _jsx("span", { className: "truncate text-[14px] font-normal leading-5", children: option?.label })] }, value)) : (_jsx("span", { className: cn("text-[14px] font-normal leading-5", index !== selectedValues.length - 1 && "mr-1"), children: index !== selectedValues.length - 1
                            ? `${option?.label},`
                            : option?.label }, value));
                }) }), _jsxs("div", { className: "flex items-center justify-between gap-2", children: [multiple && selectedValues.length > 0 && (_jsx("div", { onClick: (e) => {
                            e.preventDefault();
                            e.stopPropagation();
                            handleClear();
                        }, className: "size-4 p-0", children: _jsx(Icon, { name: "XmarkLight", size: 16, className: "cursor-pointer text-gray-700 dark:text-gray-400" }) })), searchable ? (_jsx(Icon, { name: "CaretSort", size: 16, className: "cursor-pointer text-gray-700 dark:text-gray-400" })) : (_jsx(Icon, { name: "ChevronDown", size: 16, className: "cursor-pointer text-gray-700 dark:text-gray-400" }))] })] }));
};
//# sourceMappingURL=selected-content.js.map