import React from "react";
import { useCallback, useEffect, useMemo, useRef } from "react";

export default function Modal({ open, onClose, children, className }) {
	const modalRef = useRef(null);

	useEffect(() => {
		const { current: el } = modalRef;
		el.showModal();
	}, []);

	useEffect(() => {
		const { current: el } = modalRef;
		if (open) el.showModal();
	}, [open]);

	return (
		<dialog className={className} ref={modalRef} onClose={onClose}>
			{children}
		</dialog>
	);
}
