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 FlagsSvg from 'assets/icons/travels-section/flags.svg';

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

export const PlanInfoScreen: FC<Props> = ({ navigation }) => {
  return (
    <PageWrapper>
      <Header label={'Plan & track your travels'} />
      <ImageBackground
        style={styles.background}
        source={require('../../../../assets/images/nm-background.png')}
      >
        <ScrollView
          style={styles.wrapper}
          showsVerticalScrollIndicator={false}
          contentContainerStyle={styles.contentContainerStyle}
        >
          <Text style={[styles.text, { flex: 0 }]}>
            Travels section is a structured way to record your visited countries / regions / points
            of interest and to explore future destinations.
          </Text>

          <View>
            <Text style={[styles.title, { marginBottom: 10 }]}>Countries</Text>
            <View style={styles.infoBlock}>
              <View style={styles.imgContainer}>
                <FlagsSvg fill={Colors.ORANGE} />
                <Text style={styles.imgText}>Countries</Text>
              </View>
              <Text style={styles.text}>
                Countries give you the easiest way of recording your travels - just mark a country
                as visited and it will be reflected in your UN score. You can also tell us how long
                you stayed in a
              </Text>
            </View>
            <Text style={[styles.text, { flex: 0 }]}>
              country and this will influence your SLOW score. Read more about slow here
            </Text>
          </View>
        </ScrollView>
      </ImageBackground>
    </PageWrapper>
  );
};