import React from "react";
import {
  View,
  Text,
  StyleSheet,
  Image,
  TouchableOpacity,
  ScrollView,
} from "react-native";
import { MaterialIcons } from "@expo/vector-icons";

export default function ProfileScreen() {
  return (
    <ScrollView contentContainerStyle={styles.scrollContent}>
      <View style={styles.avatarContainer}>
        <Image
          source={require("../../assets/images/user_image.jpg")}
          style={styles.avatar}
        />
        <TouchableOpacity style={styles.editAvatar}>
          <MaterialIcons name="edit" size={20} color="#FDFDFD" />
        </TouchableOpacity>
      </View>
      <View style={styles.card}>
        <View style={styles.row}>
          <View style={styles.textGroup}>
            <Text style={styles.label}>Name</Text>
            <Text style={styles.value}>Amar Kesari</Text>
          </View>
          <TouchableOpacity>
            <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}>9876543210</Text>
          </View>
        </View>
      </View>

      {/* Other Menu Items */}
      <View style={styles.card}>
        {menuItem("My Vehicle")}
        <View style={styles.divider} />
        {menuItem("Language")}
      </View>

      <View style={styles.card}>
        {menuItem("About App")}
        <View style={styles.divider} />
        {menuItem("Logout")}
      </View>
    </ScrollView>
  );
}

const menuItem = (title: string) => (
  <TouchableOpacity style={styles.menuRow}>
    <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: 105,
    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",
  },
});