import React, {useState} from 'react';
import { View, Text, Button, TextInput, StyleSheet } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

const HomeScreen = ({ navigation }: any) => {
  const [userInput, setUserInput] = useState("");
    return (
    <View style={styles.container}>
      <Text style={styles.title}>Kezdőképernyő</Text>
      <TextInput
      style={styles.input}
      placeholder="Írj be valamit..."
      value={userInput}
      onChangeText={setUserInput}
      />
      <Button
      title="További részletekhez"
      onPress={() => navigation.navigate("Details", {text: userInput})}
      />
    </View>
 );
}

 const DetailsScreen = ({ route, navigation}: any)=> {
  const {text} = route.params;

  return(
    <View style={styles.container}>
      <Text style={styles.title}>Részletek képernyő</Text>
      <Text style={styles.text}>Beírt szöveg: {text}</Text>
      <Button title="Vissza" onPress={() => navigation.goBack()}/>
    </View>
  );
}

export default function App() {
  return(
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} options={{ title: "Kezdőlap"}}/>
        <Stack.Screen name="Details" component={DetailsScreen} options={{ title: "Részletek"}}/>

      </Stack.Navigator>
    </NavigationContainer>
  ); 
}


const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    alignItems: 'center',
    justifyContent: 'center',
  },
  title:{
    fontSize: 24,
    fontWeight: "bold",
    marginBottom: 20,
  },
  input: {
    width: "80%",
    borderWidth: 1,
    borderColor: "#ccc",
    padding: 10,
    marginBottom: 20,
    borderRadius: 5,
    backgroundColor: "#ff00ff"
  },
  text: {
    fontSize: 18,
    marginBottom: 20,
  },
});