import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
// packages/ui/src/components/layout/GameContainer.tsx
/**
 * @fileoverview Game Container - Content + CTA grid layout for game screens
 * @description Provides scrollable content area with fixed CTA button at bottom
 * @package @donotdev/ui
 * @version 0.0.1
 * @since 0.0.1
 * @author AMBROISE PARK Consulting
 */
import { Button, ScrollArea } from '@donotdev/components';
import { cn } from '@donotdev/components';
/**
 * 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 function GameContainer({ content, cta, align = 'center', justify = 'center', disableScrollArea = false, contentVariant = 'narrow', contentClassName, ctaClassName, }) {
    const narrowWrapper = contentVariant === 'narrow' && (_jsx("div", { className: "dndev-game-container__content-narrow", children: content }));
    const scrollContent = contentVariant === 'narrow' ? narrowWrapper : content;
    const contentInner = disableScrollArea ? (_jsx("div", { style: {
            overflow: 'auto',
            overscrollBehavior: 'contain',
            height: '100%',
        }, children: scrollContent })) : (_jsx(ScrollArea, { className: "dndev-game-container__scroll", children: scrollContent }));
    return (_jsxs("div", { className: "dndev-game-container", children: [_jsx("div", { className: cn('dndev-game-container__content', contentClassName), "data-align": align, "data-justify": justify, "data-content-variant": contentVariant, children: _jsx("div", { className: "dndev-game-container__scroll-wrapper", children: contentInner }) }), cta && (_jsx("div", { className: cn('dndev-game-container__cta', ctaClassName), children: Array.isArray(cta) ? (_jsx("div", { className: "dndev-game-container__cta-buttons", children: cta.map((button, index) => (_jsx(Button, { onClick: button.onClick, disabled: button.disabled ?? false, variant: button.variant ?? 'default', className: "dndev-game-container__cta-button", fullWidth: true, children: button.label }, index))) })) : (_jsx(Button, { onClick: cta.onClick, disabled: cta.disabled ?? false, variant: cta.variant ?? 'default', className: "dndev-game-container__cta-button", children: cta.label })) }))] }));
}
