import { useEffect, useState, type ReactNode } from "react";
import { createPortal } from "react-dom";
/** A popup (a quiz, a flashcard deck) in the same dialog as the other creators, which can be
* minimised to a small pill in the corner and brought back, keeping its place. Escape minimises. */
export function StudyOverlay({ title, onClose, children }: { title: string; onClose: () => void; children: ReactNode }) {
const [minimized, setMinimized] = useState(false);
useEffect(() => {
if (minimized) return;
const onKey = (e: KeyboardEvent) => e.key === "Escape" && setMinimized(true);
document.addEventListener("keydown", onKey);
return () => document.removeEventListener("keydown", onKey);
}, [minimized]);
return createPortal(
<>
{/* Stays mounted while minimised, so the answers given so far are kept */}