add a settings button at the top right similar to tiktok where its icon is 3 horizontal lines that brings me to SettingsScreen.js
// screens/ProfileScreen.js

import React, { useContext } from 'react';
import { View, StyleSheet, ScrollView, Alert, ActivityIndicator } from 'react-native';
import { Title, Caption, Text, Button } from 'react-native-paper';
// Removed unused Icon import since it's not used in ProfileScreen
// import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import { AuthContext } from '../context/AuthContext';
import { useTheme } from 'react-native-paper';

/**
 * ProfileScreen Component
 * Displays the authenticated user's profile information.
 */
const ProfileScreen = ({ navigation }) => {
  const { user, signOut, loading } = useContext(AuthContext);
  const theme = useTheme(); // Access the current theme

  /**
   * Handler for the logout button
   */
  const handleLogout = () => {
    Alert.alert(
      'Logout',
      'Are you sure you want to logout?',
      [
        { text: 'Cancel', style: 'cancel' },
        {
          text: 'Logout',
          style: 'destructive',
          onPress: () => signOut(),
        },
      ],
      { cancelable: true }
    );
  };

  /**
   * If the app is still loading user data, show a loading indicator
   */
  if (loading) {
    return (
      <View style={styles.loadingContainer}>
        <ActivityIndicator size="large" color={theme.colors.primary} />
      </View>
    );
  }

  /**
   * If no user is logged in, prompt the user to log in
   */
  if (!user) {
    return (
      <View style={styles.container}>
        <Text>No user data available. Please log in.</Text>
        <Button
          mode="contained"
          onPress={() => navigation.navigate('Login')}
          style={styles.loginButton}
          accessibilityLabel="Navigate to Login"
        >
          Go to Login
        </Button>
      </View>
    );
  }

  /**
   * Render the user's profile information
   */
  return (
    <ScrollView
      contentContainerStyle={[styles.container, { backgroundColor: theme.colors.background }]}
      // Removed 'style' prop to avoid applying layout properties directly
    >
      {/* User Information Section */}
      <View style={styles.userInfoSection}>
        {user.name ? (
          <Title style={[styles.title, { color: theme.colors.text }]}>{user.name}</Title>
        ) : (
          <Title style={[styles.title, { color: theme.colors.text }]}>User ID: {user.id}</Title>
        )}
        {user.email && (
          <Caption style={[styles.caption, { color: theme.colors.text }]}>{user.email}</Caption>
        )}
      </View>

      {/* Logout Button */}
      <View style={styles.logoutSection}>
        <Button
          mode="contained"
          icon="logout"
          onPress={handleLogout}
          style={styles.logoutButton}
          contentStyle={styles.buttonContent}
          accessibilityLabel="Logout"
          accessibilityHint="Logs you out of the application"
        >
          Logout
        </Button>
      </View>
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  // Removed alignItems and justifyContent from container
  container: {
    flexGrow: 1, // Use flexGrow to allow content to scroll if necessary
    padding: 20,
    // justifyContent: 'center', // Removed: should not be applied here
    // alignItems: 'center', // Removed: should not be applied here
  },
  userInfoSection: {
    paddingHorizontal: 20,
    paddingVertical: 40,
    alignItems: 'center', // Center the user info within this View
    backgroundColor: 'transparent',
  },
  title: {
    fontSize: 26,
    fontWeight: 'bold',
  },
  caption: {
    fontSize: 16,
    lineHeight: 16,
    marginTop: 5,
  },
  logoutSection: {
    paddingHorizontal: 20,
    marginTop: 30,
    alignItems: 'center', // Center the logout button within this View
  },
  logoutButton: {
    width: '100%', // Make the button stretch across the container
    borderRadius: 5,
    // backgroundColor: undefined, // Not needed: using theme colors
  },
  buttonContent: {
    height: 50, // Ensures consistent button height
    justifyContent: 'center',
  },
  loadingContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  loginButton: {
    marginTop: 20,
    borderRadius: 25,
    paddingHorizontal: 20,
    paddingVertical: 10,
  },
});

export default ProfileScreen;