digital-pilates/components/PrivacyConsentModal.tsx

import { PRIVACY_POLICY_URL, USER_AGREEMENT_URL } from '@/constants/Agree';
import React from 'react';
import {
  Dimensions,
  Linking,
  Modal,
  StyleSheet,
  Text,
  TouchableOpacity,
  View
} from 'react-native';

const { width } = Dimensions.get('window');

interface PrivacyConsentModalProps {
  visible: boolean;
  onAgree: () => void;
  onDisagree: () => void;
}

export default function PrivacyConsentModal({
  visible,
  onAgree,
  onDisagree,
}: PrivacyConsentModalProps) {
  const handleUserAgreementPress = () => {
    Linking.openURL(USER_AGREEMENT_URL);
  };

  const handlePrivacyPolicyPress = () => {
    Linking.openURL(PRIVACY_POLICY_URL);
  };

  return (
    <Modal
      visible={visible}
      transparent
      animationType="fade"
      statusBarTranslucent
    >
      <View style={styles.overlay}>
        <View style={styles.container}>
          <Text style={styles.title}>欢迎来到Sealife</Text>

          <View style={styles.contentContainer}>
            <Text style={styles.description}>
              点击"同意并继续"代表您已阅读并理解
            </Text>
            <View style={styles.linksContainer}>
              <TouchableOpacity onPress={handleUserAgreementPress}>
                <Text style={styles.link}>《用户协议》</Text>
              </TouchableOpacity>
              <Text style={styles.and}> 和 </Text>
              <TouchableOpacity onPress={handlePrivacyPolicyPress}>
                <Text style={styles.link}>《隐私政策》</Text>
              </TouchableOpacity>
            </View>
            <Text style={styles.description}>
              我们深知保护用户隐私信息的重要性，请认真进行阅读。
            </Text>
            <View style={styles.viewFullContainer}>
              <Text style={styles.viewFull}>查看完整版 </Text>
              <TouchableOpacity onPress={handleUserAgreementPress}>
                <Text style={styles.link}>《用户协议》</Text>
              </TouchableOpacity>
              <Text style={styles.viewFull}> 和 </Text>
              <TouchableOpacity onPress={handlePrivacyPolicyPress}>
                <Text style={styles.link}>《隐私政策》</Text>
              </TouchableOpacity>
            </View>
          </View>

          <TouchableOpacity style={styles.agreeButton} onPress={onAgree}>
            <Text style={styles.agreeButtonText}>同意并继续</Text>
          </TouchableOpacity>

          <TouchableOpacity style={styles.disagreeButton} onPress={onDisagree}>
            <Text style={styles.disagreeButtonText}>不同意并退出</Text>
          </TouchableOpacity>
        </View>
      </View>
    </Modal>
  );
}

const styles = StyleSheet.create({
  overlay: {
    flex: 1,
    backgroundColor: 'rgba(0, 0, 0, 0.5)',
    justifyContent: 'center',
    alignItems: 'center',
    paddingHorizontal: 20,
  },
  container: {
    backgroundColor: 'white',
    borderRadius: 20,
    padding: 24,
    width: width * 0.85,
    maxWidth: 400,
    alignItems: 'center',
  },
  iconContainer: {
    marginBottom: 20,
    alignItems: 'center',
  },
  characterContainer: {
    position: 'relative',
    alignItems: 'center',
  },
  iconText: {
    fontSize: 48,
    marginBottom: 8,
  },
  balloons: {
    position: 'absolute',
    top: -5,
    right: -25,
    flexDirection: 'row',
    gap: 4,
  },
  balloon: {
    width: 12,
    height: 16,
    borderRadius: 6,
  },
  title: {
    fontSize: 20,
    fontWeight: '600',
    color: '#1F2937',
    marginBottom: 20,
    textAlign: 'center',
  },
  contentContainer: {
    marginBottom: 24,
  },
  description: {
    fontSize: 14,
    color: '#6B7280',
    lineHeight: 20,
    textAlign: 'center',
  },
  linksContainer: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    flexWrap: 'wrap',
  },
  link: {
    fontSize: 14,
    color: '#8B5FE6',
    textDecorationLine: 'underline',
  },
  and: {
    fontSize: 14,
    color: '#6B7280',
  },
  viewFullContainer: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    flexWrap: 'wrap',
    marginTop: 4,
  },
  viewFull: {
    fontSize: 14,
    color: '#6B7280',
  },
  agreeButton: {
    backgroundColor: '#8B5FE6',
    borderRadius: 25,
    paddingVertical: 14,
    paddingHorizontal: 40,
    width: '100%',
    marginBottom: 12,
  },
  agreeButtonText: {
    color: 'white',
    fontSize: 16,
    fontWeight: '600',
    textAlign: 'center',
  },
  disagreeButton: {
    paddingVertical: 14,
    paddingHorizontal: 40,
  },
  disagreeButtonText: {
    color: '#9CA3AF',
    fontSize: 16,
    fontWeight: '500',
    textAlign: 'center',
  },
});