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 FlagsIcon from '../../../../assets/icons/travels-section/flags.svg';
import RegionsIcon from '../../../../assets/icons/travels-section/regions.svg';
import TripIcon from '../../../../assets/icons/travels-section/trip.svg';

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

export const FirstStepsInfoScreen: FC<Props> = ({ navigation }) => {
  return (
    <PageWrapper>
      <Header label={'First steps'} />
      <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}>
            <FlagsIcon fill={Colors.ORANGE} />
            </View>
            <View style={styles.column}>
            <Text style={styles.title}>Countries</Text>
            <Text style={styles.subtitle}>... easiest way to start</Text>
            </View>
            
          </View>
          <Text style={styles.text}>Just mark the countries you've been to as visited. You can also idicate how long you stayed in each country.</Text>

          <View style={styles.row}>
            <View style={styles.iconContainer}>
            <RegionsIcon fill={Colors.ORANGE} />
            </View>
            <View style={styles.column}>
            <Text style={styles.title}>Regions</Text>
            <Text style={styles.subtitle}>... create your travel map</Text>
            </View>
            
          </View>
          <Text style={styles.text}>Mark regions as visited; optionally set year of first and last visit to a region. The app will create your travel map with visited regions highlighted in orange.</Text>

          <View style={styles.row}>
            <View style={styles.iconContainer}>
            <TripIcon fill={Colors.ORANGE} />
            </View>
            <View style={styles.column}>
            <Text style={styles.title}>Trips</Text>
            <Text style={styles.subtitle}>... your detailed travel log</Text>
            </View>
          </View>
          <Text style={styles.text}>Add info about your every trip, with each trip having a start and end date, list of visited regions and your comment.</Text>
          

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