import { StyleSheet, Text, View } from 'react-native';
import { colors, spacing } from '../../../src/theme';
import { useOnboarding } from '../../../src/hooks';
import { ScreenShell } from '../ui/ScreenShell';
import { Illustration } from '../ui/Illustration';
import { Avatar } from '../ui/Avatar';
import { PrimaryButton } from '../ui/PrimaryButton';

export function B1Wechat() {
  const { navigate, back } = useOnboarding();

  return (
    <ScreenShell title="微信授权" showBack onBack={back}>
      <View style={styles.center}>
        <Illustration name="wechat" size={72} radius={18} />
        <View style={styles.preview}>
          <Avatar name="defaultAvatar" size={48} />
          <View style={styles.previewText}>
            <Text style={styles.nick}>微信用户_8f3a</Text>
            <Text style={styles.tip}>将使用以下信息登录轻松聘</Text>
          </View>
        </View>
        <Text style={styles.scope}>· 获得你的昵称、头像</Text>
      </View>

      <View style={styles.footer}>
        <PrimaryButton label="同意并继续" active onPress={() => navigate('P3')} />
      </View>
    </ScreenShell>
  );
}

const styles = StyleSheet.create({
  center: { flex: 1, alignItems: 'center', justifyContent: 'center', gap: spacing.block, paddingBottom: 40 },
  preview: { flexDirection: 'row', alignItems: 'center', gap: spacing.block, backgroundColor: colors.white, padding: 8, borderRadius: 8, borderWidth: 1, borderColor: colors.border },
  previewText: { gap: 4 },
  nick: { fontSize: 15, fontWeight: '700', color: colors.textPrimary },
  tip: { fontSize: 12, color: colors.textHint },
  scope: { fontSize: 12, color: colors.textHint },
  footer: { marginTop: 20 },
});