import Icon, { SizeProp, ThickProp } from "../Icon/Icon";
import IconProp from "../../../Types/Icon/IconProp";
import React from "react";
const FullPageModal = (props) => {
    const handleClose = () => {
        var _a;
        (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props);
    };
    const handleKeyDown = (event) => {
        if (event.key === "Enter" || event.key === " ") {
            event.preventDefault();
            handleClose();
        }
    };
    // Handle Escape key at the modal level
    React.useEffect(() => {
        const handleEscapeKey = (event) => {
            if (event.key === "Escape") {
                handleClose();
            }
        };
        document.addEventListener("keydown", handleEscapeKey);
        return () => {
            document.removeEventListener("keydown", handleEscapeKey);
        };
    }, []);
    return (React.createElement("div", { className: "full-page-modal", role: "dialog", "aria-modal": "true" },
        React.createElement("div", { className: "margin-50 align-right", onClick: handleClose, onKeyDown: handleKeyDown, role: "button", tabIndex: 0, "aria-label": "Close modal" },
            React.createElement(Icon, { icon: IconProp.Close, size: SizeProp.ExtraLarge, thick: ThickProp.Thick })),
        React.createElement("div", { className: "margin-50" }, props.children)));
};
export default FullPageModal;
//# sourceMappingURL=FullPageModal.js.map