// Dropdown.tsx
'use client';
import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
import { usePopper } from 'react-popper';
import type { ReactNode } from 'react';

type DropdownProps = {
  button?: ReactNode;             // 👈 make optional
  children: ReactNode;
  btnClassName?: string;
  placement?: any;
  offset?: [number, number];
  panelClassName?: string;
  closeOnItemClick?: boolean;
};

const Dropdown = (props: DropdownProps, forwardedRef: any) => {
  const [visible, setVisible] = useState(false);
  const referenceRef = useRef<HTMLButtonElement | null>(null);
  const popperRef = useRef<HTMLDivElement | null>(null);

  const { styles, attributes } = usePopper(referenceRef.current, popperRef.current, {
    placement: props.placement || 'bottom-end',
    modifiers: [{ name: 'offset', options: { offset: props.offset ?? [0, 8] } }],
  });

  useEffect(() => {
    const onDoc = (e: MouseEvent) => {
      if (!referenceRef.current || !popperRef.current) return;
      if (referenceRef.current.contains(e.target as Node)) return;
      if (popperRef.current.contains(e.target as Node)) return;
      setVisible(false);
    };
    document.addEventListener('mousedown', onDoc);
    return () => document.removeEventListener('mousedown', onDoc);
  }, []);

  useImperativeHandle(forwardedRef, () => ({ close: () => setVisible(false) }));

  const defaultButton = (
    <span className="inline-flex h-9 w-9 items-center justify-center rounded-full bg-gray-200 dark:bg-rtgray-700" />
  );

  return (
    <>
      <button
        ref={referenceRef}
        type="button"
        className={props.btnClassName}
        onClick={() => setVisible((v) => !v)}
      >
        {props.button ?? defaultButton} {/* 👈 fallback */}
      </button>

      <div
        ref={popperRef}
        style={styles.popper}
        {...attributes.popper}
        className="z-50"
      >
        {visible && (
          <div className={props.panelClassName ?? 'rounded-lg bg-white dark:bg-rtgray-700 shadow-lg ring-1 ring-black/5'}>
            {props.children}
          </div>
        )}
      </div>
    </>
  );
};

export default forwardRef(Dropdown);