'use client';

import { useEffect, useRef, useState } from 'react';

export function Dropdown({
  button,
  children,
  classNames,
}: {
  button: React.ReactNode;
  children: React.ReactNode;
  classNames?: string;
}) {
  const [open, setOpen] = useState(false);
  const ref = useRef<HTMLDivElement>(null);

  useEffect(() => {
    function handleClickOutside(e: MouseEvent) {
      if (ref.current && !ref.current.contains(e.target as Node)) {
        setOpen(false);
      }
    }
    document.addEventListener('mousedown', handleClickOutside);
    return () => document.removeEventListener('mousedown', handleClickOutside);
  }, []);

  return (
    <div ref={ref} className="relative">
      <div onClick={() => setOpen((v) => !v)}>{button}</div>
      {open && (
        <div className={`absolute z-50 ${classNames ?? ""}`}>{children}</div>
      )}
    </div>
  );
}