import { useEffect, useRef } from 'react';

function useClickOutside(handler) {
  const domNodeRef = useRef();

  useEffect(() => {
    const maybeHandler = (event) => {
      // If the clicked element is not inside the ref's current element
      if (domNodeRef.current && !domNodeRef.current.contains(event.target)) {
        handler(); // Call the provided handler function
      }
    };

    document.addEventListener('mousedown', maybeHandler);

    return () => {
      document.removeEventListener('mousedown', maybeHandler);
    };
  }, [handler]); // Re-run effect if handler changes

  return domNodeRef;
}

// Example Usage:
// function Dropdown() {
//   const [isOpen, setIsOpen] = useState(false);
//   const dropdownRef = useClickOutside(() => {
//     if (isOpen) setIsOpen(false); // Close dropdown if open and clicked outside
//   });

//   return (
//     <div ref={dropdownRef}>
//       <button onClick={() => setIsOpen(!isOpen)}>Toggle Dropdown</button>
//       {isOpen && (
//         <ul style={{ border: '1px solid black', padding: '10px' }}>
//           <li>Item 1</li>
//           <li>Item 2</li>
//         </ul>
//       )}
//     </div>
//   );
// }