import { StyleSheet, TouchableOpacity } from 'react-native';
import { useRouter } from 'expo-router';
import ParallaxScrollView from '@/components/default/ParallaxScrollView';
import { ThemedText, ThemedTextButton, ThemedView } from '@/components/theme';
import { IconSymbol } from '@/components/ui/IconSymbol';

const SettingsScreen = () => {
  const router = useRouter();

  return (
    <ParallaxScrollView
      headerImage={
        <IconSymbol size={80} color='#808080' name='gear.circle' style={styles.headerImage} />
      }
      headerTitle={
        <ThemedText type='title' style={styles.headerTitle}>
          Settings
        </ThemedText>
      }
    >
      <ThemedView style={styles.section}>
        <TouchableOpacity 
          style={styles.settingItem}
          onPress={() => router.push('/settings/profile')}
        >
          <IconSymbol name="person.fill" size={24} color="#007AFF" style={styles.icon} />
          <ThemedView style={styles.settingContent}>
            <ThemedText style={styles.settingTitle}>Profile</ThemedText>
            <ThemedText style={styles.settingSubtitle}>Name, photo, email</ThemedText>
          </ThemedView>
          <IconSymbol name="chevron.right" size={20} color="#C7C7CC" />
        </TouchableOpacity>

      </ThemedView>
      
      <ThemedView style={styles.section}>
      </ThemedView>
    </ParallaxScrollView>
  );
};

export default SettingsScreen;

const styles = StyleSheet.create({
  headerImage: {
    color: '#808080',
    bottom: 6,
    left: 38,
    position: 'absolute',
  },
  headerTitle: {
    position: 'absolute',
    bottom: 20,
    left: 16,
    right: 0,
    textAlign: 'center',
    fontSize: 48,
    lineHeight: 64,
    fontWeight: 'bold',
  },
  section: {
    marginVertical: 16,
    borderRadius: 10,
    overflow: 'hidden',
  },
  settingItem: {
    flexDirection: 'row',
    alignItems: 'center',
    padding: 16,
    backgroundColor: 'rgba(200, 200, 200, 0.1)',
    marginBottom: 1,
  },
  icon: {
    marginRight: 16,
  },
  settingContent: {
    backgroundColor: 'transparent',
    flex: 1,
  },
  settingTitle: {
    fontSize: 17,
    fontWeight: '500',
  },
  settingSubtitle: {
    fontSize: 14,
    opacity: 0.6,
    marginTop: 4,
  },
});