BaaS_Driver_Android_App/app/user/profile.tsx

import React from "react";
import {
  View,
  Text,
  StyleSheet,
  Image,
  TouchableOpacity,
  ScrollView,
} from "react-native";
import { MaterialIcons } from "@expo/vector-icons";
import LanguageModal from "@/components/Profile/LangaugeModal";
import { useSelector } from "react-redux";
import { RootState } from "@/store";
import EditIcon from "../../assets/icons/edit.svg";
import { router } from "expo-router";

export default function ProfileScreen() {
  const [isLangaugeModalVisible, setLanguageModalVisible] =
    React.useState(false);

  const toggleLanguageModal = () => {
    setLanguageModalVisible(!isLangaugeModalVisible);
  };

  const { data } = useSelector((state: RootState) => state.user);

  const userName = data?.name || "User";
  const mobileNumber = data?.mobile || "Not provided";

  return (
    <>
      <ScrollView contentContainerStyle={styles.scrollContent}>
        <View style={styles.avatarContainer}>
          <Image
            source={require("../../assets/images/user_image.jpg")}
            style={styles.avatar}
          />
          <TouchableOpacity style={styles.editAvatar}>
            <EditIcon />
          </TouchableOpacity>
        </View>
        <View style={styles.card}>
          <View style={styles.row}>
            <View style={styles.textGroup}>
              <Text style={styles.label}>Name</Text>
              <Text style={styles.value}>{userName}</Text>
            </View>
            <TouchableOpacity
              onPress={() => {
                router.push("/user/edit_name");
              }}
            >
              <MaterialIcons name="edit" size={20} color="#555C70" />
            </TouchableOpacity>
          </View>
          <View style={styles.divider} />
          <View style={styles.row}>
            <View style={styles.textGroup}>
              <Text style={styles.label}>Mobile Number</Text>
              <Text style={styles.value}>{mobileNumber}</Text>
            </View>
          </View>
        </View>

        <View style={styles.card}>
          {menuItem("My Vehicle")}
          <View style={styles.divider} />
          {menuItem("Language", () => toggleLanguageModal())}
        </View>

        <View style={styles.card}>
          {menuItem("About App")}
          <View style={styles.divider} />
          {menuItem("Logout")}
        </View>
      </ScrollView>
      <LanguageModal
        onClose={() => setLanguageModalVisible(false)}
        visible={isLangaugeModalVisible}
      />
    </>
  );
}

const menuItem = (title: string, onPress?: () => void) => (
  <TouchableOpacity style={styles.menuRow} onPress={onPress}>
    <Text style={styles.menuText}>{title}</Text>
    <MaterialIcons name="chevron-right" size={20} color="#555C70" />
  </TouchableOpacity>
);

const styles = StyleSheet.create({
  container: {
    borderWidth: 1,
    flex: 1,
    backgroundColor: "#F3F5F8",
  },
  topBar: {
    flexDirection: "row",
    alignItems: "center",
    paddingHorizontal: 8,
    paddingVertical: 12,
    backgroundColor: "#F3F5F8",
  },
  backButton: {
    padding: 8,
  },
  headerText: {
    fontSize: 16,
    fontWeight: "600",
    marginLeft: 8,
    color: "#252A34",
  },
  scrollContent: {
    paddingHorizontal: 16,
    paddingBottom: 32,
  },
  avatarContainer: {
    alignItems: "center",
    marginVertical: 24,
  },
  avatar: {
    width: 120,
    height: 120,
    borderRadius: 60,
  },
  editAvatar: {
    position: "absolute",
    bottom: 0,
    right: "35%",
    width: 40,
    height: 40,
    backgroundColor: "#008866",
    borderRadius: 20,
    justifyContent: "center",
    alignItems: "center",
  },
  card: {
    backgroundColor: "#FCFCFC",
    borderRadius: 8,
    marginBottom: 16,
    paddingHorizontal: 16,
    paddingVertical: 8,
  },
  row: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    paddingVertical: 12,
  },
  textGroup: {
    flexDirection: "column",
  },
  label: {
    fontSize: 14,
    color: "#252A34",
  },
  value: {
    fontSize: 14,
    fontWeight: "600",
    color: "#252A34",
    marginTop: 2,
  },
  divider: {
    height: 1,
    backgroundColor: "#E5E9F0",
    marginVertical: 4,
  },
  menuRow: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    paddingVertical: 16,
  },
  menuText: {
    fontSize: 14,
    color: "#252A34",
  },
});