import React from 'react';
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
import { MaterialIcons } from '@expo/vector-icons'; {/*Estos son los iconos*/}

export default function TodoItem({ item,pressHandler }) {{/*asi es como recibes los datos de "props" que te paso app.jsx,
es el nombre de la prop lo que pasa, no el de la variable. La función se llama borraTodo pero la prop le pusiste presshandler */}
  return (
    <TouchableOpacity onPress={() => pressHandler(item.key)}>
		<View style={styles.item}>
		  <MaterialIcons name='delete' size={24} color='#333' />
		  <Text style={styles.itemText}>{item.text}</Text>
		</View>
    </TouchableOpacity>
  )
}

const styles = StyleSheet.create({
  item: {
	fontSize: 20,
    padding: 16,
    marginTop: 16,
    borderColor: 'gray',
    borderWidth: 1,
    borderStyle: "dashed",
    borderRadius: 1,
    borderRadius: 10,
	  
    flexDirection: 'row',
    alignItems: 'center',	  
  },
  itemText: {
    marginLeft: 10,
  },	
});