import { View, Text, Button } from 'react-native';
import { useTheme } from '../contexts/ThemeContext';

// this is the standard pattern for creating a component
// exporting this way allows other files to include by just doing:
// import { SomeTabScreen1 } from './src/screens/SomeTabScreen1';
export function SomeTabScreen1({ navigation }) {
  const { colors } = useTheme();

  // colors are provided by the app's theme context which wraps navigation
  // navigation is avaliable as well since this screen is a child of naviagtion,
  // see the bottom of App.tsx for how and why that all works

  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Welcome to the other page of the app!</Text>
      <Button
        title="Test screen"
        onPress={() => navigation.navigate('Test')}
        color={colors.primary}
      />
    </View>
  );
}
// if you arent familiar with react everything is meant to be component based.
// components can do their own logic but they also return a 'View' which actually gets rendered
// you can also write regular functions which dont return views and you can pass parameters to either