import React from 'react'
import { Text, TouchableOpacity, View } from 'react-native'
import { SafeAreaView } from 'react-native-safe-area-context'
import { styles } from './SecondScreen.styles'

interface Props {
  onNextPressed: () => void
}

export const SecondScreen: React.FunctionComponent<Props> = ({ onNextPressed }) => {
  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.textContainer}>
        <Text style={{ textAlign: 'center' }}>
          This is another screen. click the button to go back to the Home screen.
        </Text>
      </View>
      <View style={styles.buttonContainer}>
        <TouchableOpacity onPress={onNextPressed} testID="secondScreenButton">
          <Text style={{ fontSize: 15, textAlign: 'center', padding: 20, backgroundColor: 'black', color: 'white' }}>
            Press Me
          </Text>
        </TouchableOpacity>
      </View>
    </SafeAreaView>
  )
}