import { FC } from 'react';
import { ImageBackground, View, Text, ScrollView } from 'react-native';
import type { NavigationProp } from '@react-navigation/native';

import { Header, PageWrapper } from '../../../components';
import { styles } from './styles';
import { Colors } from 'src/theme';
import UserGroupIcon from '../../../../assets/icons/user-group.svg';
import CrownIcon from '../../../../assets/icons/crown.svg';
import IDCardIcon from '../../../../assets/icons/id-card.svg';
import StreetPeopleIcon from '../../../../assets/icons/street-view.svg';
import ChartPieIcon from '../../../../assets/icons/chart-pie.svg';
import MemoriamIcon from '../../../../assets/icons/monument.svg';
import ClockIcon from '../../../../assets/icons/clock.svg';
import TrophyIcon from '../../../../assets/icons/trophy.svg';

type Props = {
  navigation: NavigationProp<any>;
};

export const JoinInfoScreen: FC<Props> = ({ navigation }) => {
  return (
    <PageWrapper>
      <Header label={'Our community'} />
      <ImageBackground
        style={styles.background}
        source={require('../../../../assets/images/nm-background.png')}
      >
        <ScrollView
          style={styles.wrapper}
          showsVerticalScrollIndicator={false}
          contentContainerStyle={styles.contentContainerStyle}
        >
          
          <View style={styles.row}>
            <View style={styles.iconContainer}>
            <UserGroupIcon fill={Colors.ORANGE} />
            </View>
            <Text style={styles.title}>Master ranking</Text>
          </View>
          <Text style={styles.text}>The list of our travellers who have at least 40 regions on our NM1301 Masterlist.</Text>

          <View style={styles.row}>
            <View style={styles.iconContainer}>
            <CrownIcon fill={Colors.ORANGE} />
            </View>
            <Text style={styles.title}>UN masters</Text>
          </View>
          <Text style={styles.text}>These people have travelled to every United Nations Country, of which there are 193.</Text>

          <View style={styles.row}>
            <View style={styles.iconContainer}>
            <IDCardIcon fill={Colors.ORANGE} />
            </View>
            <Text style={styles.title}>LPI ranking</Text>
          </View>
          <Text style={styles.text}>The Low Passport Index (LPI) ranking is conceived as a list of travellers who travel on passports which can be considered less 'privileged' in terms of freedom of entry to a number of places.</Text>

          <View style={styles.row}>
            <View style={styles.iconContainer}>
            <StreetPeopleIcon fill={Colors.ORANGE} />
            </View>
            <Text style={styles.title}>Series rankings</Text>
          </View>
          <Text style={styles.text}>Rankings for each of our series lists.</Text>

          <View style={styles.row}>
            <View style={styles.iconContainer}>
            <ChartPieIcon fill={Colors.ORANGE} />
            </View>
            <Text style={styles.title}>Statistics</Text>
          </View>
          <Text style={styles.text}>Our statistics based on our members' travels.</Text>

          <View style={styles.row}>
            <View style={styles.iconContainer}>
            <MemoriamIcon fill={Colors.ORANGE} />
            </View>
            <Text style={styles.title}>In Memoriam ranking</Text>
          </View>
          <Text style={styles.text}>Ranking of deceased travellers.</Text>

          <View style={styles.row}>
            <View style={styles.iconContainer}>
              <ClockIcon fill={Colors.ORANGE} width={12} height={16} />
            </View>
            <Text style={styles.title}>In History ranking</Text>
          </View>
          <Text style={styles.text}>Ranking of famous historical figures.</Text>

          <View style={styles.row}>
            <View style={styles.iconContainer}>
            <TrophyIcon fill={Colors.ORANGE} />
            </View>
            <Text style={styles.title}>Triumphs</Text>
          </View>
          <Text style={styles.text}>Daily updates about our travellers' achievements</Text>
          

        </ScrollView>
      </ImageBackground>
    </PageWrapper>
  );
};
