import { router } from 'expo-router';
import { Pressable, Text, StyleSheet, View } from 'react-native';
import { useTranslation } from 'react-i18next';
import { Screen } from '../../src/components/Screen';
import { BackButton } from '../../src/components/BackButton';
import { color, radius, spacing, typography } from '../../src/theme';

export default function Settings() {
  const { t } = useTranslation();
  return (
    <Screen>
      <BackButton fallbackHref="/(tabs)/profile" />
      <Text style={styles.h1}>{t('settings.title')}</Text>
      <View style={styles.list}>
        <Item label={t('settings.language')} onPress={() => router.push('/settings/language')} />
        <Item label={t('settings.notifications')} onPress={() => router.push('/settings/notifications')} />
        <Item label={t('settings.paymentMethods')} onPress={() => router.push('/settings/payment-methods')} />
        <Item label={t('settings.security')} onPress={() => router.push('/settings/security')} />
      </View>
    </Screen>
  );
}

interface ItemProps { label: string; onPress?: () => void }
function Item({ label, onPress }: ItemProps) {
  return (
    <Pressable style={styles.row} onPress={onPress}>
      <Text style={styles.rowText}>{label}</Text>
      <Text style={styles.muted}>›</Text>
    </Pressable>
  );
}

const styles = StyleSheet.create({
  h1: { fontSize: typography.scale.h1.size, fontWeight: '700', color: color.ink[900] },
  list: { backgroundColor: color.bg[0], borderRadius: radius.lg, marginTop: spacing[2] },
  row: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', padding: spacing[4], borderBottomColor: color.border, borderBottomWidth: 1 },
  rowText: { color: color.ink[900] },
  muted: { color: color.ink[500] },
});