import { Button, StyleSheet, Text, View } from 'react-native';
import { useTranslation } from 'react-i18next';

import { useAuth } from '../state/auth/AuthContext';
import { backendBaseUrl } from '../config/env';

export function HomeScreen() {
  const { t } = useTranslation();
  const { username, logout } = useAuth();

  return (
    <View style={styles.container}>
      <Text style={styles.title}>{t('app.title')}</Text>
      <Text style={styles.text}>
        {t('common.loading')} {username ? `(${username})` : ''}
      </Text>
      <Text style={styles.muted}>API: {backendBaseUrl}</Text>
      <Button title={t('auth.logout')} onPress={logout} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, alignItems: 'center', justifyContent: 'center', padding: 16, gap: 12 },
  title: { fontSize: 20, fontWeight: '600' },
  text: { fontSize: 14 },
  muted: { fontSize: 12, color: '#666' },
});

