import { Center, Column, Row } from 'native-base';
import React from 'react';
import {Text, View, StyleSheet, Button} from 'react-native';

const GameLevel = ({navigation}) => {
    return (
        <View style={styles.screen} >
            <View style={styles.levelWrapper}>
                <View style={styles.levelContainer}>
                    <Button style={styles.btn} title='Elementry' onPress={()=>{navigation.navigate('StartGameScreen')}} />
                    <Button style={styles.btn} title='Medium' onPress={()=>{navigation.navigate('MediumLevelStart')}} />
                    <Button style={styles.btn} title='Advance' onPress={()=>{navigation.navigate('AdvanceLevelStart')}} />
                </View>
            </View>
        </View>
    );
}

const styles = StyleSheet.create({
    screen: {
        flex: 1,
        padding: 30
    },
    levelContainer: {
        maxWidth: '100%',
        height: '60%',
        flexDirection: 'column',
        justifyContent: 'space-between',
        alignItems: 'center',
        paddingHorizontal: 30
    },
    levelWrapper: {
        width: '100%',
        justifyContent: 'center',
        alignItems: 'center'
    },
    btn: {
        maxWidth: '100%',
        height: 30
    }
});

export default GameLevel;