// components/Dropdown.js
import { Tag } from "sigpro";

let currentOpen = null;

if (typeof window !== 'undefined' && !window.__dropdownHandlerRegistered) {
  window.addEventListener('click', (e) => {
    if (currentOpen && !currentOpen.contains(e.target)) {
      currentOpen.open = false;
      currentOpen = null;
    }
  });
  window.__dropdownHandlerRegistered = true;
}

export const Dropdown = (props) => {
  const { class: className, children, ...rest } = props;

  return Tag("details", {
    ...rest,
    class: `dropdown ${className || ''}`.trim(),
    onclick: (e) => {
      const details = e.currentTarget;
      if (currentOpen && currentOpen !== details) {
        currentOpen.open = false;
      }
      setTimeout(() => {
        currentOpen = details.open ? details : null;
      }, 0);
    }
  }, children);
};