import { useRef, useState } from 'react';
import { useClickAway } from 'react-use';

interface MoreMenuProps {
  children: React.ReactNode;
}
export const MoreMenu = ({ children }: MoreMenuProps) => {
  const [isOnMoreMenu, setIsOnMoreMenu] = useState(false);
  const ref = useRef(null);
  useClickAway(ref, () => {
    setIsOnMoreMenu(false);
  });

  return (
    <div ref={ref}>
      <button type="button" className="btn top-more-btn" onClick={() => setIsOnMoreMenu((prev) => !prev)}>
        <span>더보기 버튼</span>
      </button>
      {isOnMoreMenu && <div className="more-menu on">{children}</div>}
    </div>
  );
};
