import React from 'react';
import { View, Text, TouchableOpacity, Modal, StyleSheet } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { COLOR_SCALES } from '@/theme/colors';
import { title } from '@/theme/typography';

const ReportOptionsModal = ({ visible, onClose, onReportPress }) => {
  return (
    <Modal
      visible={visible}
      transparent={true}
      animationType="slide"
      onRequestClose={onClose}
    >
      <TouchableOpacity 
        style={styles.modalOverlay}
        activeOpacity={1}
        onPress={onClose}
      >
        <View style={styles.modalContent}>
          <View style={styles.modalHandle} />
          
          <TouchableOpacity 
            style={styles.reportOption}
            onPress={onReportPress}
          >
            <Ionicons name="flag-outline" size={22} color={COLOR_SCALES.tertiary[60]} />
            <Text style={styles.reportOptionText}>Şikayet Et</Text>
          </TouchableOpacity>
          
          <TouchableOpacity 
            style={styles.cancelButton}
            onPress={onClose}
          >
            <Text style={styles.cancelButtonText}>İptal</Text>
          </TouchableOpacity>
        </View>
      </TouchableOpacity>
    </Modal>
  );
};

const styles = StyleSheet.create({
  modalOverlay: {
    flex: 1,
    backgroundColor: 'rgba(0,0,0,0.5)',
    justifyContent: 'flex-end',
  },
  modalContent: {
    backgroundColor: "#fff",
    borderTopLeftRadius: 24,
    borderTopRightRadius: 24,
    paddingHorizontal: 20,
    paddingTop: 12,
    paddingBottom: 32,
    alignItems: 'center',
  },
  modalHandle: {
    width: 40,
    height: 4,
    backgroundColor: COLOR_SCALES.colorGray[30],
    borderRadius: 2,
    marginBottom: 16,
  },
  reportOption: {
    flexDirection: 'row',
    alignItems: 'center',
    width: '100%',
    paddingVertical: 16,
    borderBottomWidth: 1,
    borderBottomColor: COLOR_SCALES.colorGray[20],
  },
  reportOptionText: {
    ...title['M/Regular'],
    color: COLOR_SCALES.tertiary[60],
    marginLeft: 12,
  },
  cancelButton: {
    backgroundColor: COLOR_SCALES.colorGray[10],
    paddingVertical: 14,
    paddingHorizontal: 24,
    borderRadius: 12,
    width: '100%',
    alignItems: 'center',
    marginTop: 16,
  },
  cancelButtonText: {
    ...title['M/SemiBold'],
    color: COLOR_SCALES.primary[60],
  },
});

export default ReportOptionsModal;