import React, { memo } from 'react';
import { Image, StyleSheet, Text, TouchableOpacity } from 'react-native';
import { Feather } from '@expo/vector-icons';

type VisitImagePickerProps = {
  imageUri: string | null;
  onPickImage: () => void;
};

const VisitImagePicker = ({
  imageUri,
  onPickImage,
}: VisitImagePickerProps) => {
  return (
    <>
      <Text style={styles.title}>Photo (facultatif)</Text>

      <TouchableOpacity style={styles.button} onPress={onPickImage}>
        <Feather name="image" color="#1A73E8" size={18} />
        <Text style={styles.buttonText}>Choisir une image</Text>
      </TouchableOpacity>

      {imageUri && (
        <Image source={{ uri: imageUri }} style={styles.image} />
      )}
    </>
  );
};

export default memo(VisitImagePicker);

const styles = StyleSheet.create({
  title: {
    marginTop: 20,
    fontWeight: '700',
    fontSize: 15,
    color: '#202124',
  },
  button: {
    backgroundColor: '#E8F0FE',
    borderRadius: 100,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    marginTop: 14,
    paddingVertical: 12,
  },
  buttonText: {
    color: '#1A73E8',
    fontWeight: '500',
    marginLeft: 6,
  },
  image: {
    width: '100%',
    height: 200,
    marginTop: 10,
    borderRadius: 10,
  },
});