import React from 'react';
import PropTypes from 'prop-types';

import { Button, Text, View } from 'react-native';

import styles from '../Profile.styles.js';

export default function PhoneListItem({ index, label, number, handleDelete, handleEdit, handleEditStart }) {
    return (
        <View style={styles.listItem}>
            <View style={styles.listValue}>
                <Text style={styles.value}>{number}</Text>
                <Text style={styles.label}>{label}</Text>
            </View>
            <View style={styles.listActions}>
                {handleEdit !== null && <Button title={`Edit`} onPress={() => handleEditStart(index)} />}
                <Button title={`X`} onPress={() => handleDelete(index)} />
            </View>
        </View>
    );
}

PhoneListItem.propTypes = {
    index: PropTypes.number.isRequired,
    label: PropTypes.string.isRequired,
    number: PropTypes.string.isRequired,
    handleDelete: PropTypes.func.isRequired,
    handleEdit: PropTypes.func,
    handleEditStart: PropTypes.func.isRequired,
};

PhoneListItem.defaultProps = {
    handleEdit: null,
};