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

export default function PrivacyPolicy() {
  const { t } = useTranslation();
  return (
    <Screen>
      <NaviHeader variant="center" title={t('privacy.title')} showBack onBack={() => router.replace('/(tabs)/profile')} />
      <View style={styles.card}>
        <Text style={styles.title}>{t('privacy.cardTitle')}</Text>
        <Text style={styles.body}>{t('privacy.body1')}</Text>
        <Text style={styles.body}>{t('privacy.body2')}</Text>
      </View>
    </Screen>
  );
}

const styles = StyleSheet.create({
  card: {
    backgroundColor: color.bg[0],
    borderColor: color.border,
    borderRadius: radius.xl,
    borderWidth: 1,
    gap: spacing[3],
    padding: spacing[5],
  },
  title: { color: color.ink[900], fontSize: typography.scale.h2.size, fontWeight: '900' },
  body: { color: color.ink[500], fontSize: typography.scale.body.size, lineHeight: 23 },
});