import React from 'react';
import { 
  View, 
  SafeAreaView, 
  StatusBar, 
  StyleSheet, 
  ViewStyle 
} from 'react-native';
import { GameHeader } from './GameHeader';

interface GameContainerProps {
  children: React.ReactNode;
  title: string;
  score?: number;
  timeLeft?: number;
  progress?: number;
  subtitle?: string;
  backgroundColor?: string;
  showHeader?: boolean;
  statusBarStyle?: 'light-content' | 'dark-content';
  style?: ViewStyle;
  headerStyle?: ViewStyle;
}

/**
 * Container component that wraps games with consistent layout
 * Provides safe area, status bar, and header management
 */
export const GameContainer: React.FC<GameContainerProps> = ({
  children,
  title,
  score,
  timeLeft,
  progress,
  subtitle,
  backgroundColor = '#F8F9FA',
  showHeader = true,
  statusBarStyle = 'dark-content',
  style,
  headerStyle
}) => {
  return (
    <SafeAreaView style={[styles.container, { backgroundColor }, style]}>
      <StatusBar 
        barStyle={statusBarStyle} 
        backgroundColor={backgroundColor}
        translucent={false}
      />
      
      {showHeader && (
        <GameHeader
          title={title}
          score={score}
          timeLeft={timeLeft}
          progress={progress}
          subtitle={subtitle}
          style={headerStyle}
        />
      )}
      
      <View style={styles.content}>
        {children}
      </View>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  content: {
    flex: 1,
    paddingHorizontal: 16,
  },
});