import * as React from 'react';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import WelcomeScreen from '../screens/WelcomeScreen';
import SubscribeScreen from '../screens/SubscribeScreen';

const Stack = createNativeStackNavigator();

const RootNavigator = () => {
  return (
    <Stack.Navigator initialRoute={SubscribeScreen}>
      {/* Set up stack navigation to move between welcome screen and subscribe screen here */}
      <Stack.Screen name='Welcome' component={WelcomeScreen} />
      <Stack.Screen name='Subscribe' component={SubscribeScreen} />
    </Stack.Navigator>
  );
};

export default RootNavigator;

const WelcomeScreen = ({ navigation }) => {
  // Add Welcome screen code here
  return (
    <View style={welcomeStyles.container}>
      <View style={welcomeStyles.contentContainer}>
        <Image
          source={require('../assets/little-lemon-logo.png')}
          style={welcomeStyles.logo}
        />
        <Text style={welcomeStyles.title}>
          {' '}
          Little Lemon, your Local Mediterranean Bistro{' '}
        </Text>
      </View>
      <Button onPress={() => navigation.navigate('Subscribe')}>
        Newsletter
      </Button>
    </View>
  );
};