import React from 'react';
import { Text, Image, StyleSheet } from 'react-native';
import { TouchableOpacity } from 'react-native-gesture-handler';

type ImageItem = {
  id: string;
  imageUrl: string;
  name: string;
};

type ImageItemProps = {
  onPress: (itemId: string) => void;
  item: ImageItem;
};

const ImageItem = (props: ImageItemProps) => {
  const {
    onPress,
    item: { id, imageUrl, name },
  } = props;

  const handlePress = () => onPress(id);

  return (
    <TouchableOpacity style={styles.container} onPress={handlePress}>
      <Image
        resizeMethod="scale"
        resizeMode="contain"
        source={{ uri: imageUrl, width: 50, height: 20 }}
        style={styles.imageLeft}
      />
      <Text ellipsizeMode="tail" numberOfLines={1} style={styles.text}>
        {name}
      </Text>
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    alignItems: 'center',
    borderBottomWidth: 1,
    borderColor: '#dedede',
    marginTop: 15,
    padding: 10,
    borderRadius: 2,
  },

  imageLeft: { marginRight: 15 },

  text: {
    color: '#222',
    fontWeight: 'normal',
  },
});

export default ImageItem;