import { ActivityIndicator, Pressable, StyleSheet, Text } from 'react-native';
import { colors } from '../../../src/theme';

interface Props {
  label: string;
  active?: boolean;
  onPress?: () => void;
  loading?: boolean;
}

/** 主按钮：active=高亮可点；false=置灰(未激活) */
export function PrimaryButton({ label, active = true, onPress, loading = false }: Props) {
  return (
    <Pressable
      style={[styles.btn, active ? styles.btnActive : styles.btnDisabled]}
      onPress={active && !loading ? onPress : undefined}
      disabled={!active || loading}
    >
      {loading ? <ActivityIndicator color={colors.textInverse} /> : <Text style={styles.btnText}>{label}</Text>}
    </Pressable>
  );
}

const styles = StyleSheet.create({
  btn: { height: 50, borderRadius: 12, alignItems: 'center', justifyContent: 'center' },
  // 按钮底色用 primaryBtn 而非 primary：白字对比 4.8:1 过 WCAG AA，
  // primary 作白字底只有 3.64:1，不满足 AA（见 AGENTS.md 配色规范）
  btnActive: { backgroundColor: colors.primaryBtn },
  btnDisabled: { backgroundColor: colors.textDisabled },
  btnText: { fontSize: 17, fontWeight: '700', color: colors.textInverse },
});