import React from 'react';
import { View, Text, TouchableOpacity, StyleSheet, Modal } from 'react-native';
import { useThemeContext } from './ThemeProvider';
import { useTranslation } from '../src/i18n';
import { borderRadius } from '../constants/theme';

interface HealthConsentModalProps {
  onAccept: () => void;
  onCancel: () => void;
}

export default function HealthConsentModal({ onAccept, onCancel }: HealthConsentModalProps) {
  const { colors } = useThemeContext();
  const { t } = useTranslation();

  return (
    <Modal transparent animationType="fade" visible>
      <View style={styles.overlay}>
        <View style={[styles.container, { backgroundColor: colors.card }]}>
          <Text style={[styles.title, { color: colors.text }]}>{t('health_consent.title')}</Text>
          <Text style={[styles.desc, { color: colors.textSecondary }]}>{t('health_consent.description')}</Text>
          <View style={styles.actions}>
            <TouchableOpacity style={[styles.btn, { backgroundColor: colors.primary }]} onPress={onAccept}>
              <Text style={[styles.btnText, { color: colors.background }]}>{t('health_consent.accept')}</Text>
            </TouchableOpacity>
            <TouchableOpacity style={[styles.btn, { backgroundColor: 'transparent', borderWidth: 1, borderColor: colors.border }]} onPress={onCancel}>
              <Text style={[styles.btnText, { color: colors.text }]}>{t('health_consent.cancel')}</Text>
            </TouchableOpacity>
          </View>
        </View>
      </View>
    </Modal>
  );
}

const styles = StyleSheet.create({
  overlay: { flex: 1, backgroundColor: 'rgba(0,0,0,0.5)', justifyContent: 'center', alignItems: 'center', padding: 24 },
  container: { borderRadius: borderRadius.lg, padding: 24, width: '100%', maxWidth: 340 },
  title: { fontSize: 18, fontWeight: '700', marginBottom: 12 },
  desc: { fontSize: 14, lineHeight: 20, marginBottom: 20 },
  actions: { gap: 10 },
  btn: { paddingVertical: 12, borderRadius: 999, alignItems: 'center' },
  btnText: { fontSize: 14, fontWeight: '600' },
});