import type { ReactNode } from 'react';
/**
 * CTA button definition
 */
export interface CTAButton {
    label: string;
    onClick: () => void;
    disabled?: boolean;
    variant?: 'default' | 'outline' | 'ghost' | 'link';
}
/**
 * GameContainer props
 */
export interface GameContainerProps {
    /** Main content area (scrollable, centered by default) */
    content: ReactNode;
    /** Optional fixed CTA button(s) at bottom - single button or array for multiple buttons */
    cta?: CTAButton | CTAButton[];
    /** Alignment variant for content area */
    align?: 'center' | 'start' | 'stretch';
    /** Justify variant for content area */
    justify?: 'center' | 'start' | 'end' | 'between';
    /** Disable ScrollArea (use plain overflow) - for interactive content */
    disableScrollArea?: boolean;
    /** Content width: 'narrow' (default, constrained) or 'full' */
    contentVariant?: 'full' | 'narrow';
    /** Additional className for content wrapper */
    contentClassName?: string;
    /** Additional className for CTA button */
    ctaClassName?: string;
}
/**
 * GameContainer - Content + CTA grid layout for game screens
 *
 * Provides scrollable content area with optional fixed CTA button at bottom.
 * Used for game sessions, onboarding flows, wizards, assessments, tutorials.
 *
 * Layout Zones:
 * - Content: Scrollable (ScrollArea), centered by default (customizable)
 * - CTA: Fixed at bottom, full-width touch target (48px)
 *
 * Default Behavior:
 * - Content is horizontally + vertically centered
 * - ScrollArea enabled for cross-browser scroll styling
 * - CTA has 16px top padding + 2px border separator
 *
 * @param {GameContainerProps} props - Component props
 * @returns {JSX.Element} GameContainer component
 *
 * @example
 * Basic usage (centered content + CTA)
 * ```tsx
 * <GameContainer
 *   content={
 *     <div className="max-w-2xl">
 *       <h1>Welcome</h1>
 *       <p>Let's get started</p>
 *     </div>
 *   }
 *   cta={{ label: 'Start', onClick: handleStart }}
 * />
 * ```
 *
 * @example
 * Full-width form (no centering)
 * ```tsx
 * <GameContainer
 *   align="stretch"
 *   justify="start"
 *   content={<FullWidthForm />}
 *   cta={{ label: 'Submit', onClick: handleSubmit }}
 * />
 * ```
 *
 * @example
 * Multiple CTA buttons (side by side)
 * ```tsx
 * <GameContainer
 *   content={<ChallengeContent />}
 *   cta={[
 *     { label: 'Accept', onClick: handleAccept, variant: 'default' },
 *     { label: 'Decline', onClick: handleDecline, variant: 'outline' }
 *   ]}
 * />
 * ```
 *
 * @version 0.0.1
 * @since 0.0.1
 * @author AMBROISE PARK Consulting
 */
export declare function GameContainer({ content, cta, align, justify, disableScrollArea, contentVariant, contentClassName, ctaClassName, }: GameContainerProps): import("react/jsx-runtime").JSX.Element;
//# sourceMappingURL=GameContainer.d.ts.map