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

interface Props {
  onNextPressed: () => void
}

export const Home: React.FunctionComponent<Props> = ({ onNextPressed }) => {
  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.textContainer}>
        <Text style={{ textAlign: 'center' }}>
          Welcome to the Nona Template Application. Click the button below to navigate to a second screen.
        </Text>
      </View>
      <View style={styles.buttonContainer}>
        <TouchableOpacity onPress={onNextPressed} testID="nextButton">
          <Text style={{ fontSize: 15, textAlign: 'center', padding: 20, backgroundColor: 'black', color: 'white' }}>
            Press Me
          </Text>
        </TouchableOpacity>
      </View>
    </SafeAreaView>
  )
}