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

import { Header, PageWrapper } from '../../../components';

import { styles } from './styles';
import { NAVIGATION_PAGES } from '../../../types';

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

export const InfoScreen: FC<Props> = ({ navigation }) => {
  return (
    <PageWrapper>
      <Header label={''} shouldClose={true} />
      <ImageBackground
        style={styles.background}
        source={require('../../../../assets/images/nm-background.png')}
      >
        <ScrollView
          style={styles.wrapper}
          showsVerticalScrollIndicator={false}
          contentContainerStyle={styles.contentContainerStyle}
        >
          <Text style={styles.title}>NomadMania</Text>
          <Text style={styles.text}>
            The ultimate hub for global explorers.
          </Text>


          <View style={{ gap: 6 }}>
            <Text style={styles.subtitle}>Discover the World</Text>
            <View style={styles.divider} />
            <Text style={styles.text}>Find new travel destinations and points of interest.</Text>
            <View style={styles.buttonsAndText}>
              <TouchableOpacity
                style={styles.button}
                onPress={() => navigation.navigate(NAVIGATION_PAGES.DISCOVER_INFO)}
              >
                <Text style={styles.buttonText}>Read more...</Text>
              </TouchableOpacity>
            </View>
          </View>

          <View style={{ gap: 6 }}>
            <Text style={styles.subtitle}>Plan & track your travels</Text>
            <View style={styles.divider} />
            <Text style={styles.text}>
              Tell us where you've been and we will create your travel map.
            </Text>
            <View style={styles.buttonsAndText}>
              <TouchableOpacity
                style={styles.button}
                onPress={() => navigation.navigate(NAVIGATION_PAGES.PLAN_INFO)}
              >
                <Text style={styles.buttonText}>Read more...</Text>
              </TouchableOpacity>
            </View>
          </View>

          <View style={{ gap: 6}}>
            <Text style={styles.subtitle}>Connect to other nomads</Text>
            <View style={styles.divider} />
            <Text style={styles.text}>
              Check out our ranking and statistics, see where others are traveling.
            </Text>
            <View style={styles.buttonsAndText}>
              <TouchableOpacity
                style={styles.button}
                onPress={() => navigation.navigate(NAVIGATION_PAGES.JOIN_INFO)}
              >
                <Text style={styles.buttonText}>Read more...</Text>
              </TouchableOpacity>
            </View>
          </View>

          <View style={{ gap: 6, borderTopColor: "#000000", borderTopWidth: 1, paddingTop: 5 }}>
            <Text style={styles.subtitle}>First steps</Text>
            <View style={styles.divider} />
            <Text style={styles.text}>
              It's easy to start using NomadMania.
            </Text>
            <View style={styles.buttonsAndText}>
              <TouchableOpacity
                style={styles.button}
                onPress={() => navigation.navigate(NAVIGATION_PAGES.FIRST_STEPS_INFO)}
              >
                <Text style={styles.buttonText}>Read more...</Text>
              </TouchableOpacity>
            </View>
          </View>
        </ScrollView>
      </ImageBackground>
    </PageWrapper>
  );
};
