import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from "react";
import ChatDropDown from "./index";
import CircularIcon from "../CircularIcon";
function App1() {
    const searchOption = [
        {
            label: "Option 1",
            iconUrl: "https://media.licdn.com/dms/image/C5603AQHn7tbH46HwRw/profile-displayphoto-shrink_100_100/0/1651460224714?e=1688601600&v=beta&t=Rp0HL0Q-b3zSydvEhWzj67pxqvi5lIRF-ZlLloVru4o",
        },
        {
            label: "Option 2",
            iconUrl: "https://www.figma.com/file/uMCwJDRPBFV51GKIwmSdhD/Qlu-Design-System?type=design&node-id=1495-20633&t=gsXlkhdqI2aPnnRQ-4",
        },
        {
            label: "Option 3",
            iconUrl: "https://media.licdn.com/dms/image/C5603AQHn7tbH46HwRw/profile-displayphoto-shrink_100_100/0/1651460224714?e=1688601600&v=beta&t=Rp0HL0Q-b3zSydvEhWzj67pxqvi5lIRF-ZlLloVru4o",
        },
    ];
    const [value, setValue] = useState("");
    const handleOptionClick = (option) => {
        setValue(option.label);
    };
    const handleInputChange = (event) => {
        const value = event.target.value;
        setValue(value);
    };
    return (_jsx("div", { className: "App", children: _jsx(ChatDropDown, { value: value, isCreateShown: true, filteredOptions: searchOption, handleOptionClick: handleOptionClick, handleInputChange: handleInputChange, isLoading: true, renderProps: (props) => (_jsxs("div", { style: {
                    display: "flex",
                    alignItems: "center",
                    marginLeft: "12px",
                    margin: "8px",
                }, onClick: () => handleOptionClick(props), children: [props.iconUrl !== undefined && (_jsx(CircularIcon, { iconPath: props.iconUrl, iconSize: "32" })), _jsx("span", { children: props.label })] }, props.label)) }) }));
}
export default App1;
