import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';
import React from 'react';
import NewscoutTitleHeader from '../components/organisms/Headers/NewscoutTitleHeader';
import {List} from 'react-native-paper';
import fonts from '../theme/fonts';
import EntypoIcon from 'react-native-vector-icons/Entypo';
import colors from '../theme/colors';

const HelpPage = props => {
  const {navigation} = props;

  const listItems = [
    {
      id: 0,
      title: 'FAQ',
      onPress: () => navigation.navigate('FAQ'),
    },
    {
      id: 1,
      title: 'Contact Us',
      onPress: () => navigation.navigate('ContactUs'),
    },
    {
      id: 2,
      title: 'Terms & Conditions',
      onPress: () => navigation.navigate('Terms&Conditions'),
    },
    {
      id: 3,
      title: 'Privacy Policy',
      onPress: () => navigation.navigate('PrivacyPolicy'),
    },
    {
      id: 4,
      title: 'About Us',
      onPress: () => navigation.navigate('AboutUs'),
    },
  ];

  return (
    <View>
      <NewscoutTitleHeader
        title={'Help'}
        backButtonShown
        onBackClick={() => navigation.goBack()}
      />
      {listItems.map(item => (
        <TouchableOpacity onPress={item.onPress}>
          <List.Item
            title={item.title}
            titleStyle={styles.listItemText}
            style={styles.listItem}
            key={item.id}
            right={props => (
              <EntypoIcon
                name="chevron-thin-right"
                size={16}
                color={colors.black}
              />
            )}
          />
        </TouchableOpacity>
      ))}
    </View>
  );
};

export default HelpPage;

const styles = StyleSheet.create({
  listItemText: {
    fontFamily: fonts.type.medium,
  },
  listItem: {
    height: 64,
    justifyContent: 'center',
  },
});