import React from "react";
import { Box, Text, useInput, useStdout } from "ink";
export function HelpOverlay({ title, hints, onClose }) {
    const { stdout } = useStdout();
    const cols = stdout?.columns ?? 80;
    const maxKeyLen = Math.max(...hints.map((h) => h.key.length));
    useInput((_input, key) => {
        if (key.escape || _input === "?") {
            onClose();
        }
    });
    return (React.createElement(Box, { flexDirection: "column", borderStyle: "round", borderColor: "cyan", paddingX: 2, paddingY: 1, width: Math.min(cols - 4, 60) },
        React.createElement(Box, { marginBottom: 1 },
            React.createElement(Text, { bold: true, color: "cyan" },
                title,
                " \u2014 Keybindings")),
        hints.map((h, i) => (React.createElement(Box, { key: i },
            React.createElement(Text, { color: "yellow", bold: true }, h.key.padEnd(maxKeyLen + 2)),
            React.createElement(Text, null, h.label)))),
        React.createElement(Box, { marginTop: 1 },
            React.createElement(Text, { color: "gray" }, "Press ? or esc to close"))));
}
//# sourceMappingURL=HelpOverlay.js.map