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

import { Button } from '../../components/';
import { ButtonVariants } from '../../types/components';

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

import LogoSVG from '../../../assets/images/logo.svg';

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

const WelcomeScreen: FC<Props> = ({ navigation }) => {
  return (
    <View>
      <ImageBackground
        style={{ height: '100%' }}
        source={require('../../../assets/images/welcome-background.png')}
      >
        <View style={styles.overlay} />

        <SafeAreaView style={styles.wrapper}>
          <LogoSVG style={{ display: 'flex', alignSelf: 'center' }} />
          <View style={styles.buttonsAndText}>
            <Text style={styles.text}>Endless exploring...</Text>
            <View style={{ gap: 10 }}>
              <Button onPress={() => navigation.navigate(NAVIGATION_PAGES.REGISTER)}>
                Get started
              </Button>
              <Button
                onPress={() => navigation.navigate(NAVIGATION_PAGES.LOGIN)}
                variant={ButtonVariants.OPACITY}
              >
                Login
              </Button>
              <Button
                onPress={() => navigation.navigate(NAVIGATION_PAGES.IN_APP)}
                variant={ButtonVariants.OPACITY}
              >
                Without registration
              </Button>
            </View>
          </View>
        </SafeAreaView>
      </ImageBackground>
    </View>
  );
};

export default WelcomeScreen;
