import * as React from 'react';

import { Button, View, Text,StyleSheet} from 'react-native';

import { NavigationContainer } from '@react-navigation/native';

import { createNativeStackNavigator } from '@react-navigation/native-stack';

import {TextInput} from 'react-native-paper';

function LoginScreen({ navigation }) {

return (

  <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>

  <Text style={styles.loginText}>Login</Text>

  <View

    style={{

      borderBottomColor:'black',

      borderBottomWidth:2

    }}

    />

  <View style={{marginTop:15}}>

  <TextInput label="Email"

    left={<TextInput.Icon name="email" />}

    mode="flat"

    style={{margin: 10}}

    activeUnderlineColor="yellow"

    underlineColor="red">

    </TextInput>

  <TextInput label="Password"

    left={<TextInput.Icon name="lock" />}

    mode="flat"

    style={{margin: 10}}

    activeUnderlineColor="yellow"

    underlineColor="red">

    </TextInput>

</View>

  <Button

  title="Go to Home"

  onPress={() => navigation.navigate('Home')}

  />

  </View>

);

}

function HomeScreen({ navigation }) {

return (

  <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>

    <Text style={{fontWeight:'bold',textAlign:'center',color:'skyblue',}}>Fazlly Hardware Whole Sale Dealer</Text>

    <View style={{width:200,height:300}}>

    <Button color="#e9967a"

     title="COMPUTERS"

     onPress={() => navigation.navigate('computer')}

     />

     <View style={{marginTop:10}}></View>

     <Button color="#e9967a"

     title="LAPTOPS"

     onPress={() => navigation.navigate('laptops')}

     />

     <View style={{marginTop:10}}></View>

     <Button color="#e9967a"

     title="HARD-DRIVES"

     onPress={() => navigation.navigate('harddrive')}

     />

     <View style={{marginTop:10}}></View>

     <Button color="#e9967a"

     title="FLASH-MEMORIES"

     onPress={() => navigation.navigate('flashmemories')}

     />

    </View>

  <Button  title="Go back" onPress={() => navigation.goBack()} />

  </View>

);

}

const Stack = createNativeStackNavigator();

function App() {

return (

<NavigationContainer>

    <Stack.Navigator initialRouteName="Login">

    <Stack.Screen name="Login Page" component={LoginScreen} />

    <Stack.Screen name="Home" component={HomeScreen} />

    </Stack.Navigator>

</NavigationContainer>

);

}

const styles=StyleSheet.create(

  {

    loginText:{

      fontFamily:'sans-serif',

      fontSize:32,

      fontWeight:'bold'

    },

  }

)

export default App;