import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import styles from "./styles.module.css";
export function TutorialFrame({ stepIndex, totalSteps = 4, title, hint, children, controls, badge, }) {
    return (_jsxs("div", { className: styles.guidedOverlay, children: [_jsx("div", { className: styles.softDim }), _jsxs("section", { className: styles.guidePanel, children: [_jsx("div", { className: styles.stepPips, "aria-hidden": "true", children: Array.from({ length: totalSteps }).map((_, index) => (_jsx("span", { className: `${styles.stepPip} ${index <= stepIndex ? styles.stepPipActive : ""}` }, index))) }), _jsx("h2", { children: title }), _jsx("p", { children: hint }), controls ? _jsx("div", { className: styles.guideControls, children: controls }) : null] }), children ? _jsx("div", { className: styles.practiceDock, children: children }) : null, badge ? _jsx("div", { className: styles.successDock, children: badge }) : null] }));
}
export function FallbackTiltButton({ onPress, disabled = false, label }) {
    return (_jsx("button", { className: styles.fallbackButton, type: "button", onClick: onPress, disabled: disabled, children: label }));
}
export function CommandPair({ TriggerIcon, ActionIcon }) {
    return (_jsxs("div", { className: styles.commandPair, "aria-hidden": "true", children: [_jsx(TriggerIcon, { className: styles.commandIcon }), _jsx("span", { className: styles.commandArrow, children: "\u2192" }), _jsx(ActionIcon, { className: styles.commandIcon })] }));
}
export function SuccessBadge({ TickIcon }) {
    return (_jsx("div", { className: styles.successBadge, children: _jsx(TickIcon, { className: styles.successIcon }) }));
}
