import React, { useRef, useEffect } from 'react';
import { Animated, StyleSheet, Image, ImageSourcePropType } from 'react-native';
import {
    widthPercentageToDP as wp,
    heightPercentageToDP as hp
} from 'react-native-responsive-screen';

interface SlideInImageProps {
    source: ImageSourcePropType;
}

// This component creates a "slide-in" effect for Images. Images slide from left to view.
const SlideInImage: React.FC<SlideInImageProps> = ({ source }) => {
    const slideAnim = useRef(new Animated.Value(-400)).current;
    useEffect(() => {
        Animated.timing(slideAnim, {
            toValue: 0,
            duration: 1000,
            useNativeDriver: true
        }).start();
    }, [slideAnim]);

    return (
        <Animated.View
            style={[
                styles.imageContainer,
                {
                    transform: [{ translateX: slideAnim }]
                }
            ]}
        >
            <Image source={source} style={styles.image} resizeMode="stretch" />
        </Animated.View>
    );
};

const styles = StyleSheet.create({
    imageContainer: {
        flex: 1
    },
    image: {
        height: wp('60%'),
        width: wp('100%')
    }
});

export default SlideInImage;