text: import React from 'react';
  import { View, StyleSheet, Image, Text, Dimensions, ScrollView } from 'react-native';
  
  import BodyText from '../components/BodyText';
  import TitleText from '../components/TitleText';
  import MainButton from '../components/MainButton';
  
  import Colors from '../constants/colors';
  
  const GameOverScreen = ({ guessRounds, userNumber, newGame }) => {
  
    return (
      <ScrollView>
        <View style={styles.screen}>
          <TitleText>The Game is Over!</TitleText>
          <View style={styles.imageContainer}>
            <Image
              style={styles.image}
              source={require('../assets/success.png')}
              resizeMode="cover"
            />
          </View>
          <View style={styles.textContainer}>
            <BodyText style={styles.text}>Your phone needed <Text style={styles.highlight}>{guessRounds}</Text> rounds to guess the number <Text style={styles.highlight}>{userNumber}</Text></BodyText>
          </View>
          <MainButton onPress={newGame}>NEW GAME</MainButton>
        </View>
      </ScrollView>
    );
  };
  
  const styles = StyleSheet.create({
    screen: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
      paddingVertical: 10
    },
    image: {
      width: '100%',
      height: '100%'
    },
    imageContainer: {
      borderRadius: Dimensions.get('window').width * 0.7 / 2,
      borderWidth: 3,
      borderColor: 'black',
      width: Dimensions.get('window').width * 0.7,
      height: Dimensions.get('window').width * 0.7,
      overflow: 'hidden',
      marginVertical: Dimensions.get('window').height / 30
    },
    textContainer: {
      marginHorizontal: 30,
      marginVertical: Dimensions.get('window').height / 60
    },
    highlight: {
      color: Colors.primary,
      fontFamily: 'open-sans-bold'
    },
    text: {
      textAlign: 'center',
      fontSize: Dimensions.get('window').height < 400 ? 16 : 20
    }
  });
  
  export default GameOverScreen;
  