// "use client";
// import Select, { SingleValue, components } from "react-select";
// import { customSelectProps } from "./types/types";
// import { Controller } from "react-hook-form";
// import { useState, useRef, useEffect } from "react";

// const CustomSelect = (props: customSelectProps) => {
//     const [range, setRange] = useState({ from: "", to: "" });
//     const [menuOpen, setMenuOpen] = useState(false);
//     const menuRef = useRef<HTMLDivElement>(null);

//     const handleSelectChange = (newValue: SingleValue<{ value: any; label: string }>) => {
//         props.onChange?.(newValue);
//     };

//     const handleRangeChange = (e: React.ChangeEvent<HTMLInputElement>, type: "from" | "to") => {
//         setRange((prev) => ({ ...prev, [type]: e.target.value }));
//     };

//     // Close menu when clicking outside
//     useEffect(() => {
//         const handleClickOutside = (event: MouseEvent) => {
//             if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
//                 setMenuOpen(false);
//             }
//         };
//         document.addEventListener("mousedown", handleClickOutside);
//         return () => document.removeEventListener("mousedown", handleClickOutside);
//     }, []);

//     const customStyles = {
//         container: (provided: any) => ({
//             ...provided,
//             height: "48px",
//             padding: 0,
//             width: props.width || "100%",
//             position: "relative",
//         }),
//         control: (base: any, state: any) => ({
//             ...base,
//             backgroundColor: props.styles?.bg || "#FAF9F6",
//             borderRadius: "8px",
//             padding: "12px 8px",
//             display: "flex",
//             alignItems: "center",
//             boxShadow: state.isFocused ? "0 0 0 2px #E5E7EB" : "none",
//             backdropFilter: "blur(200px)",
//             WebkitBackdropFilter: "blur(200px)",
//         }),
//         menu: (base: any) => ({
//             ...base,
//             zIndex: 9999,
//             background: "white",
//             padding: "10px",
//             width: "100%",
//         }),
//     };

//     const CustomMenu = (props: any) => {
//         return (
//             <components.Menu {...props}>
//                 <div ref={menuRef} className="p-2" onMouseDown={(e) => e.stopPropagation()}>
//                     <label className="block text-sm text-gray-500">From:</label>
//                     <input
//                         type="number"
//                         className="w-full px-2 py-1 border rounded"
//                         value={range.from}
//                         onChange={(e) => handleRangeChange(e, "from")}
//                         placeholder="Enter min value"
//                     />

//                     <label className="block text-sm mt-2 text-gray-500">To:</label>
//                     <input
//                         type="number"
//                         className="w-full px-2 py-1 border rounded"
//                         value={range.to}
//                         onChange={(e) => handleRangeChange(e, "to")}
//                         placeholder="Enter max value"
//                     />

//                     <button
//                         className="w-full mt-2 bg-blue-500 text-white py-1 rounded hover:bg-blue-600"
//                         onClick={() => setMenuOpen(false)}
//                     >
//                         Apply
//                     </button>
//                 </div>
//                 {props.children}
//             </components.Menu>
//         );
//     };

//     const CustomSingleValue = ({ data }: any) => (
//         <div className="flex gap-[10px] absolute">
//             {props?.icon}
//             <span className="line-clamp-1">{data?.label}</span>
//         </div>
//     );

//     return (
//         <div className={`flex flex-col gap-2 ${props.className || ""}`}>
//             <label htmlFor="select" className="text-[12px] lg:text-[14px] text-gray-700">
//                 {props.label}
//             </label>

//             <Controller
//                 name={props.name}
//                 control={props.control}
//                 render={({ field }) => (
//                     <Select
//                         instanceId={props.label}
//                         isMulti={props.isMulti}
//                         options={props.options}
//                         isSearchable={false}
//                         onChange={field.onChange}
//                         styles={customStyles}
//                         menuIsOpen={menuOpen} // Toggle menu visibility
//                         onMenuOpen={() => setMenuOpen(true)}
//                         onMenuClose={() => setMenuOpen(false)}
//                         components={{ Menu: CustomMenu, SingleValue: CustomSingleValue }}
//                     />
//                 )}
//             />
//         </div>
//     );
// };

// export default CustomSelect;