import { FC } from 'react';
import { ImageBackground, View, Text, Image, 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 TravellersIcon from 'assets/icons/bottom-navigation/travellers.svg';

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

export const DiscoverInfoScreen: FC<Props> = ({ navigation }) => {
  return (
    <PageWrapper>
      <Header label={'Discover the World'} />
      <ImageBackground
        style={styles.background}
        source={require('../../../../assets/images/nm-background.png')}
      >
        <ScrollView
          style={styles.wrapper}
          showsVerticalScrollIndicator={false}
          contentContainerStyle={styles.contentContainerStyle}
        >
          <View style={{ gap: 10 }}>
            <Text style={styles.title}>Use the map to explore</Text>
            <View style={styles.row}>
                <Image source={require('../../../../assets/images/map.jpeg')} style={styles.image} />
              </View>
            <Text style={styles.text}>
                Tap a region to see more details. Zoom the map to reveal our series.
              </Text>
          </View>

          <View style={{ gap: 10 }}>
            <Text style={styles.title}>Use Travels section</Text>
            <Text style={styles.text}>Use our Travels section to easily mark destinations as visited. This section provides structured lists of:</Text>
            <Text style={styles.list}>• countries</Text>
            <Text style={styles.list}>• NomadMania regions</Text>
            <Text style={styles.list}>• DARE places</Text>
            <Text style={styles.list}>• 70+ series</Text>
            <Text style={styles.ending}>... and more.</Text>
          </View>
        </ScrollView>
      </ImageBackground>
    </PageWrapper>
  );
};
