import React, {useEffect} from 'react';
import {RouteProp} from '@react-navigation/native';
import {StackNavigationProp} from '@react-navigation/stack';
import {Background} from '../../components';
import {Image, StyleSheet} from 'react-native';
import {OnboardingStackParams} from '../../routes';

type SplashScreenRouteProp = RouteProp<OnboardingStackParams, 'Login'>;
type SplashScreenNavigationProp = StackNavigationProp<
  OnboardingStackParams,
  'Login'
>;
interface SplashProps {
  route: SplashScreenRouteProp;
  navigation: SplashScreenNavigationProp;
}
const Splash: React.FC<SplashProps> = ({navigation}) => {
  useEffect(() => {
    const timer = setTimeout(() => navigation.navigate('Login'), 1500);
    return () => clearTimeout(timer);
  }, [navigation]);
  return (
    <Background centered>
      <Image
        source={require('../../assets/images/logo.png')}
        style={styles.logo}
      />
    </Background>
  );
};
const styles = StyleSheet.create({
  logo: {
    width: 284,
    height: 197,
    marginBottom: 0,
  },
});

export default Splash;