Account

                                        import React from 'react';
import { View, Text, Image, TouchableOpacity, StyleSheet, ScrollView } from 'react-native';

const AccountPage = () => {
  return (
    <View style={styles.container}>
      <ScrollView contentContainerStyle={styles.scrollContainer}>
        {/* Profile Header */}
        <View style={styles.header}>
          <Image
            source={{ uri: 'https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?q=80&w=3087&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D' }} // Replace with dynamic image
            style={styles.profileImage}
          />
          <Text style={styles.username}>John Doe</Text>
          <Text style={styles.email}>john.doe@example.com</Text>
        </View>

        {/* Account Sections */}
        <View style={styles.sectionContainer}>
          <TouchableOpacity style={styles.sectionItem}>
            <Text style={styles.sectionText}>Personal Information</Text>
          </TouchableOpacity>
          <TouchableOpacity style={styles.sectionItem}>
            <Text style={styles.sectionText}>Settings</Text>
          </TouchableOpacity>
          <TouchableOpacity style={styles.sectionItem}>
            <Text style={styles.sectionText}>Payment Methods</Text>
          </TouchableOpacity>
          <TouchableOpacity style={styles.sectionItem}>
            <Text style={styles.sectionText}>Notifications</Text>
          </TouchableOpacity>
          <TouchableOpacity style={styles.sectionItem}>
            <Text style={styles.sectionText}>Privacy Settings</Text>
          </TouchableOpacity>
          <TouchableOpacity style={styles.sectionItem}>
            <Text style={styles.sectionText}>Help & Support</Text>
          </TouchableOpacity>
          <TouchableOpacity style={styles.sectionItem}>
            <Text style={styles.sectionText}>Terms & Conditions</Text>
          </TouchableOpacity>
        </View>

        {/* Logout Button */}
        <TouchableOpacity style={styles.logoutButton}>
          <Text style={styles.logoutText}>Log Out</Text>
        </TouchableOpacity>
      </ScrollView>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f0f0f0',
  },
  scrollContainer: {
    padding: 16,
    alignItems: 'center',
  },
  header: {
    width: '100%',
    alignItems: 'center',
    marginBottom: 40,
    marginTop:40,
  },
  profileImage: {
    width: 100,
    height: 100,
    borderRadius: 50,
    marginBottom: 10,
  },
  username: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#333',
  },
  email: {
    fontSize: 16,
    color: '#666',
  },
  sectionContainer: {
    width: '100%',
    marginBottom: 40,
  },
  sectionItem: {
    backgroundColor: '#fff',
    paddingVertical: 16,
    paddingHorizontal: 20,
    borderRadius: 8,
    marginBottom: 10,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
    elevation: 3,
  },
  sectionText: {
    fontSize: 18,
    color: '#333',
  },
  logoutButton: {
    backgroundColor: '#e63946',
    paddingVertical: 12,
    paddingHorizontal: 40,
    borderRadius: 8,
    marginTop: 20,
    alignItems: 'center',
  },
  logoutText: {
    color: '#fff',
    fontSize: 18,
    fontWeight: 'bold',
  },
});

export default AccountPage;