import { VNode } from 'preact'
import { useEffect, useRef } from 'preact/hooks'

export default function MoreBox({ children }: { children: VNode | VNode[] }) {
	const dialog = useRef<HTMLDialogElement>(null)

	useEffect(() => {
		dialog.current?.addEventListener('click', (event) => {
			if (event.target === dialog.current) {
				dialog.current?.close()
			}
		})
	}, [])

	return (
		<>
			<button
				class='islands__more_box__button'
				onClick={() => dialog.current?.showModal()}
			>
				<i class='ri-more-2-line'></i>
			</button>
			<dialog class='islands__more_box__dialog' ref={dialog}>
				{children}
			</dialog>
		</>
	)
}