import React from 'react';
import { Modal, View, Text, TouchableOpacity, StyleSheet,Image } from 'react-native';
import CamIcon from '../assets/image/cam_icon.svg'
import GalleryIcon from '../assets/image/gallery_icon.svg'


const CustomImagePickerModal = ({ visible, onClose, onCamera, onGallery }) => {
  return (
    <Modal
      transparent
      animationType="slide"
      visible={visible}
      onRequestClose={onClose}
    >
      <View style={styles.overlay}>
        <View style={styles.sheet}>
          <Text style={styles.title}>Select Image Source</Text>

          <TouchableOpacity
            style={styles.option}
            onPress={() => {
              onClose();
              onCamera();
            }}
          >
            {/* <Text style={styles.optionText}>📷 Take Photo</Text> */}
            <View style={styles.row}>
          
               <CamIcon style={styles.icon} width={20} height={20} />
              {/* <Image
                source={require('../assets/image/camera.png')} // <-- Your PNG icon
                style={styles.icon}
              /> */}
              <Text style={styles.optionText}>Take Photo</Text>
            </View>
          </TouchableOpacity>

          <TouchableOpacity
            style={styles.option}
            onPress={() => {
              onClose();
              onGallery();
            }}
          >
            {/* <Text style={styles.optionText}>🖼️ Choose from Gallery</Text> */}
             <View style={styles.row}>
               <GalleryIcon style={styles.icon} width={20} height={20} />
              {/* <Image
                source={require('../assets/image/image-gallery.png')} // <-- Your PNG icon
                style={styles.icon}
              /> */}
              <Text style={styles.optionText}>Choose from Gallery</Text>
            </View>
          </TouchableOpacity>

          <TouchableOpacity style={styles.cancel} onPress={onClose}>
            <Text style={styles.optionText}>Cancel</Text>
          </TouchableOpacity>
        </View>
      </View>
    </Modal>
  );
};

export default CustomImagePickerModal;

const styles = StyleSheet.create({
  overlay: {
    flex: 1,
    backgroundColor: 'rgba(0,0,0,0.4)',
    justifyContent: 'flex-end',
  },
  sheet: {
    backgroundColor: '#fff',
    padding: 20,
    borderTopLeftRadius: 20,
    borderTopRightRadius: 20,
    elevation: 10,
  },
  title: {
    fontSize: 18,
    fontWeight: 'bold',
    marginBottom: 12,
    textAlign: 'center',
  },
  option: {
    backgroundColor: '#D0ECFF',
    padding: 14,
    borderRadius: 10,
    marginVertical: 6,
  },
  cancel: {
    backgroundColor: '#f9f8f8ff',
    padding: 14,
    borderRadius: 10,
    marginTop: 10,
    borderColor:'#ADBFD8',
    borderWidth: 0.5,

  },
  optionText: {
    color: 'black',
    fontSize: 14,
    textAlign: 'center',
  },
   row: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent:'center',
    
  },
    icon: {
    width: 22,
    height: 22,
    marginRight: 10,
    resizeMode: 'contain',
  },
});
