import * as React from "react";
import { Text, View, StyleSheet, Animated } from "react-native";
import Icon from "react-native-vector-icons/MaterialCommunityIcons";

export default function ImagePlaceholder(props) {
  const fadeAnim = React.useRef(new Animated.Value(1)).current;

  Animated.loop(
    Animated.sequence([
      Animated.timing(fadeAnim, {
        toValue: 1,
        duration: 500,
        useNativeDriver: true,
      }),
      Animated.timing(fadeAnim, {
        toValue: 0.4,
        duration: 500,
        useNativeDriver: true,
      }),
      Animated.timing(fadeAnim, {
        toValue: 1,
        duration: 500,
        useNativeDriver: true,
      }),
    ])
  ).start();

  return (
    <Animated.View
      style={[
        {
          backgroundColor: "#FAFAFA",
          borderColor: "#DDDDDD",
          borderWidth: 1,
          alignItems: "center",
          justifyContent: "center",
          height: "100%",
          width: "100%",
          borderRadius: 8,
        },
        {
          // Bind opacity to animated value
          opacity: fadeAnim,
        },
        props.style,
      ]}
    >
      <Icon name="image" color="#DDDDDD" size={48} />
    </Animated.View>
  );
}
