import React, { useState } from 'react';
import { View, Text } from 'react-native';
import MultipleTags from 'react-native-multiple-tags';

const tags = [
  'cherry',
  'mango',
  'cashew',
  'almond',
  'guava',
  'pineapple',
  'orange',
  'pear',
  'date',
  'strawberry',
  'pawpaw',
  'banana',
  'apple',
  'grape',
  'lemon',
];

const objectTags = [
  {
    key: 'id_01',
    value: 'cherry',
  },
  {
    key: 'id_02',
    value: 'mango',
  },
  {
    key: 'id_03',
    value: 'cashew',
  },
  {
    key: 'id_04',
    value: 'almond',
  },
  {
    key: 'id_05',
    value: 'guava',
  },
  {
    key: 'id_06',
    value: 'pineapple',
  },
  {
    key: 'id_07',
    value: 'orange',
  },
  {
    key: 'id_08',
    value: 'pear',
  },
  {
    key: 'id_09',
    value: 'date',
  },
];

const WelcomeComponent = () => {
  const [content, setContent] = useState([]);
  const [contentx, setContentx] = useState([]);

  return (
    <View>
      <MultipleTags
        tags={objectTags}
        search
        onChangeItem={setContent}
        title="Fruits"
      />
      {(() =>
        content.map((item) => (
          <Text key={item.key}>
            {' '}
            {item.key}: {item.value}{' '}
          </Text>
        )))()}
      <MultipleTags
        tags={tags}
        search
        onChangeItem={setContentx}
        title="Fruits"
      />
      {(() => contentx.map((item) => <Text key={item}> {item} </Text>))()}
    </View>
  );
};

export default WelcomeComponent;